Tabs

Tabs is a JavaScript component that depends on Prototype.js, designed to make it easier for designers to create tabbed interfaces.

Here's how it works

Tabs works by combining information in your markup with JavaScript automation. Set up your tabs area like so:

<div id="tabs">
	<div class="tab" data-div="div-1">Tab 1</div>
	<div class="tab" data-div="div-2">Tab 2</div>
	<div class="tab" data-div="div-3">Tab 3</div>
</div>
<div id="panels">
	<div class="panel" id="div-1">Contents of Tab 1</div>
	<div class="panel" id="div-2">Contents of Tab 2</div>
	<div class="panel" id="div-3">Contents of Tab 3</div>
</div>

Then add the following script:

new Tabs({
	tabContainer:'tabs',
	targetDiv:'panels'
});

Add some CSS, and voila!

Put a link in the tab, and Tabs will turn the whole tab into a link.

If you want to add some AJAX flavor to your page, just change out that "data-div" attribute for a "data-url" attribute, and you can replace the contents of that panel with a web page.

Download Tabs.js

Options

Name	Default	Permitted	Description
tabContainer		string id value	the div within which the tabs are contained
tabClass	'tab'	string class value	CSS class assigned to tabs
targetDiv		string id value	div within which the target panels live
autoSelect	true	boolean	determines whether first tab is automatically selected
selectedClass	'selected'	string class value	CSS class assigned to selected tab
selectedDivClass		string class value	CSS class assigned to the associated panel of the selected tab