Tanny O'Haley's Weblog

Update 18 Aug 2008: Added an openTabOfElement method and now check for the hash of the url and open the tab that contains the hash item. Try opening the Contact tab. This also works for form validation routines when you want to set focus back to a field that contains an error. If the tab is closed you will get an error. To open the tab pass the element to the tabs.openTabOfElement method before setting focus to the form element.

I liked the tabs created in Sliding Doors of CSS, Part II by Douglas Bowman. Please read the article so that you will understand how to modify the CSS of the tabs. The tabs are very nice for site navigation, but I wanted to use it in a tabbed interface within a page so that a user could click on each tab without reloading the page. First I started with the markup for the tabs.

<div class="tabs">
  <ul>
    <li class="selected"><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#ps">Products & Services</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>

A class is used on the div instead of an ID so that mutiple and nested tabs can be created. Next the markup for the tab body and tab content (tabItem).

<div class="tabBody">
	<div id="home" class="tabItem selected">
		<h2>Home Tab</h2>
	</div>
	<div id="news" class="tabItem">
		<h2>News Tab</h2>
	</div>
	<div id="ps" class="tabItem">
		<h2>Products & Services Tab</h2>
	</div>
	<div id="about" class="tabItem">
		<h2>About Tab</h2>
	</div>
	<div id="contact" class="tabItem">
		<h2>Contact Tab</h2>
	</div>
</div>

Here we give the overall tab body a class and each tab item an ID. When javascript is disabled all tabs display and the ID is used for navigation within the page. Because classes are used for each item in the tab you can nest tabs within another tab as seen in the demo.

Usage

Download the tabbed interface files and add the following to the head section of your page (modified for your directory structure).

<script type="text/javascript" src="js/events.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>
<link  type="text/css" media="screen" rel="stylesheet" href="css/tabs.css">

On DOMContentLoaded the tab function will add a classname of tabs to the body. This is used to tell the CSS that tab items can be hidden from view since javascript is enabled. To see this in action view the demo with and without javascript enabled. Then click behavior is added to each tab. When a tab is clicked the tabs.showTab() function is called to display the tab content.

Sample and Dowload

• tabdemo.htm
• events.js
• util.js
• tabs.js
• tabs.css
• tabbg.gif
• tableft.gif
• tabright.gif

Related Articles

• DOMContentLoaded for Browsers
• DOMContentLoaded for Browsers, Part II
• Sliding Doors of CSS, Part II by Douglas Bowman

Sunday, January 21st, 2007 04:11:18 PM in  CSS  Web Development