Tabbed Interface

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.

tabbedinterface1.gif

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

Related Articles

16 Comments

Gravatar Image2. Posted at 1/10/2008 11:15:31 PM by jitendra

i got an error on ie 6 ( stack overflow at line 0)

Gravatar Image3. Posted at 2/20/2008 2:41:03 AM by gos

I have found several DHTML 'nested tab interface' examples, but I guess this is one of the best one.

I really like the example.

:-)

Gravatar Image4. Posted at 8/17/2008 11:12:16 AM by kuroitora

Simple, customizable and stable ;) Thanks for this! it's honestly the best I've seen as far. One question though, is there a way to specify the tab that is highlighted when the user lands on the page? For example, an external page can link to page#tab_01, page#tab_02 etc..?

Gravatar Image5. Posted at 8/18/2008 1:20:09 PM by Tanny O'Haley

Hi Kuroitora,

I updated the code today to support your request to open a tab if the URL hash is the ID of an element within a tab. Please see the update message at the top. Also the code now requires util.js as well as events.js.

Tanny

Gravatar Image6. Posted at 8/18/2008 6:23:39 PM by kuroitora

Thanks Tanny, you're a lifesaver!!

Gravatar Image7. Posted at 9/16/2008 3:20:27 AM by Gordon

Absolutely great.

I have implemented it on my church web site under the menu item "Lectionary Readings", and it owrks OK until I try to do a print preview in some browsers, notably IE7, Safari (for windows) and Maxthon. Each of these browsers crash on print preview, whereas Firefox 3 is perfectly happy.

Could I ask someone to try it out and let me have the results ?

Also can the developer guide me as to what may be wrong ?

NOTE. The web page data is drawn from a database and is prepared for viewing by a content management system.

MAny thanks.

Gravatar Image8. Posted at 9/16/2008 9:55:38 AM by Tanny O'Haley

Hi Gordon,

I tried print preview in IE 7 and Firefox 3.0.1 and did not have a problem. Though you might want to hide the tab div and just display the tab contents in the print style sheet.

Tanny O'Haley

Gravatar Image9. Posted at 2/2/2009 4:36:43 AM by Petter

Hi Tanny,

You didn't by anychance implement this in Lotus Notes as well ? Imagine being able to convert a standard Lotus Notes tabbed table with this one on the web :-)

Gravatar Image10. Posted at 2/3/2009 12:05:20 PM by Tanny O'Haley

Hi Petter,

You can use the Tabbed Interface in a Domino web application, using Pass-Thru HTML. It looks nicer and you don't have to do a post back to see a tab's contents. We have used it for several Domino web applications where I work.

Tanny O'Haley

Gravatar Image11. Posted at 3/30/2009 2:43:20 PM by Dan Zeller

First of all, one of the cleanest tabbed tables I have seen in a while. Thanks for this post! One quick question, and I might have missed in the thread above, but trying to get the <a href> to point to another URL, such as "www.mysite.com/index?Open", not the anchor such as "#home". Is there a way to do this --- noticed when I remove the .js file, the link works fine, when added, just goes to the anchor. Thanks again!

Dan

Gravatar Image12. Posted at 3/30/2009 10:01:12 PM by Tanny O'Haley

Hi Dan,

The tab code is designed so that you can display a working tabbed interface on your web site. The hash links are to go to a specific tab on your page. If not there the url will simply open the tab. If you want to have tabs that open a completely different page rather than a spot on the current page you should look at Sliding Doors of CSS, Part II by Douglas Bowman which will give you a tabbed looking interface with anchors that will go to another page.

Gravatar Image13. Posted at 3/31/2009 7:42:40 AM by Dan

Thanks -- looked at that earlier, but I like your CSS better. If I do not use the .js file, should the CSS still work? The hover effect -- tabs changing -- does not work without the .js file.

Thanks!

Dan

Gravatar Image14. Posted at 5/16/2009 2:37:18 AM by kevin furze

I want to integrate this tab concept into an existing site, but we already have a style sheet using "tabs" as the style, and we have js functions using the word "tabs" - This is overriding your defintions

can you explain how we can change the concept to use "xtabs" instead of "tabs" for instance.

I'm sure its just replacing every "tab" for "xtab" - when I do this, I get the tabs displaying correctly, but I've lost the onClick functionality of the actual tabs

thanks kev

Gravatar Image15. Posted at 9/25/2010 12:42:06 AM by Rana Bhavna

Thank you so much I've looked in EVERY book I own both digital and real and found NOTHING that would help me make tabs like this! You rock!

Gravatar Image16. Posted at 10/1/2010 12:15:19 AM by B Reker

It shows a little menu with four items and each item is linked to some text. But at first no text is shown. Each item is a link to an element with a target ID (#item1, #item2...) and those elements are only visible when they are the target of the current URL.

Add a comment

Discussion for this entry is now closed.