Tabs

Tabs can be created in two ways: by formating existing HTML using the jQuery tabs plugin, or by building and styling the tabs in HTML. The jQuery option should be used when the tabs hold content contained within that page. The other option should only be used to format as tabs links to separate pages.

<script type="text/JavaScript" language="JavaScript">
//<![CDATA[
	$(document).ready(function() {
		$('#tabsdemo > ul').tabs();
	});
//]]>
</script>

<div id="tabsdemo" class="toptabs">
	<ul>
		<li><a href="#tabone">Tab One</a></li>
		<li><a href="#tabtwo">Tab Two</a></li>
		<li><a href="#tabthree">Tab Three</a></li>
	</ul>
<div id="tabone">
	<p>Contents of Tab One</p>
</div>
<div id="tabtwo">
	<p>Contents of Tab Two</p>
</div>
<div id="tabthree">
	<p>Contents of Tab Three</p>
</div>
</div>

In the example above the unordered list is formatted by the jquery plugin to make the tabs. Notice the href on each link refers to the id of one of the divs below it. Each of those divs is the corresponding content shown when each tab is clicked. Everything, tabs and tab contents, is wrapped in a div with its own unique id. This id is passed to the jquery script snipped. If there is already a $(document).ready(function() { on your page, just add the $('#tabsdemo > ul').tabs(); on a new line.

If you want to display tabs, but the contents of each tab are not contained within that page, you can format your links as tabs using very similar markup:

<div id="tabsdemo" class="toptabs">
	<ul class="ui-tabs-nav">
		<li class="ui-tabs-selected"><a href="/path/to/external/page/">Tab One</a></li>
		<li><a href="/path/to/external/page/">Tab Two</a></li>
		<li><a href="/path/to/external/page/">Tab Three</a></li>
	</ul>
 
<div class="tabs-container">
	<p>Contents of Tab One</p>
</div>
 
</div>

This markup reflects the markup which the jQuery plugin dynamically adds in order to format the content. Notice that one of your list items should have the class “ui-tabs-selected” in order for it to appear as the current tab. If you use this method to create tabs and link to external pages, it is recommended that those pages also contain the same links formatted as tabs so that navigation is consistent.