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>
Download the tabbed interface files and add the following to the head section of your page (modified for your directory structure).
Sample and Dowload
Add a comment
Discussion for this entry is now closed.