- Converts your HTML into a dynamic tabbed interface.
- Does not require you to set up a list of links, or anchors for the tabs.
- Use CSS to customize the appearance of the tabs.
- Gracefully supports printing (try a print preview on the example.html page) and allows a different set of styles to be applied when printing.
- Multiple tab sets on a page - you can even nest one tab set within another.
- Set the initial tab to be displayed.
- Define onLoad and onClick callback functions to perform more advanced functions, such as loading the tab content dynamically using AJAX.
- Use a cookie to remember which tab was selected so it remains selected when you return to the page.
- Object-oriented, extensively-commented code.
- MIT license so you can modify and use in commercial projects.
If you start with some simple HTML like this:
<h3>Section One</h3> Section one content. Section two content.
Add some structural DIV elements. Add a div with class=tabber around the whole thing:
<div class="tabber"> <h3>Section One</h3> Section one content. Section two content. </div>
Then add a div with class=tabbertab around each section. By default tabber will get the tab title from a heading element within the section, or you can set the title attribute to be the tab navigation text:
<div class="tabber"> <div class="tabbertab"> <h3>Section One</h3> Section one content. </div> <div class="tabbertab" title="MyTabTitle"> Section two content. </div> </div>
NOTE: the tabbertab DIVs must be child nodes of the tabber DIV. This was required in order to allow nested tabs.
After your page finishes loading, the script runs to convert your plain HTML into dynamic HTML.
Note: if you do not want it to run automatically onLoad, refer to the advanced topics.
Add some styles. Refer to the example CSS files provided, or modify one of the styles from Listamatic.
NOTE: Your original HTML has been transformed into something like this:
- The main div (class=tabber) has been changed to (class=tabberlive). This allows you to apply one style for the untabbed HTML, and a different style for the tabbed HTML.
- A ul list is added. Each item in the list is a link that triggers the dynamic navigation. The text of the link is the title attribute of the tabbertab div.
Setting the default tab
By default the first tab will be selected. To select a different initial tab, use the tabbertabdefault class (in addition to the tabbertab class):
<div class="tabbertab tabbertabdefault"> <h3>Section Two</h3> This will be selected by default. </div>Refer to example2.html to see it in action.
Dynamically Changing the TabFirst you must give an id to your main tabber div.
<div class="tabber" id="mytab1">A tabber object is attached to the div and you can use the tabShow() method to change which tab is displayed:
document.getElementById('mytab1').tabber.tabShow(0);The tabs are numbered starting at zero, so use 0 for the first tab, 1 for the second tab, etc.
When you load tabber.js it sets up an event to run when the page finishes loading. To prevent tabber from running, before you include tabber.js, set the tabberOptions variable like this:
You might want to do this if you need more control over the way that tabber initializes itself. Alternatively, if you never want tabber to run automatically, you can edit tabber.js and just comment out that portion of the code.
onLoad and onClick event callback functions
You can set an onLoad function to be called after the tab interface has finished initializing, or an onClick function (to be called when a user clicks a tab).
Refer to example2.html for a more complete example.
Persistent tabs using cookies
Refer to example-cookies.html