You do not need to add any event handlers to your HTML.
To use domTab, all you need to do is to call it in the head of your HTML page:
Out-of-the box, domTab needs an element with the id mainnav to apply the functionality to. This id will be changed to mainnavtabbed if the browser is able to show the tabbing functionality. This means that you apply your styles for a normal link list to #mainnav and the styles for the tabs to #mainnavtabbed. domTab also adds a class named tabon to the active link in the navigation. If you need to overwrite the names of these ids and the class, you can change the variables navElement navElementTabbedId and tabHighlightClass in the code.
domTab comes with its own onload call, if you want to use it together with other scripts, you need to remove the window.onload=initTabs; line and call the function initTabs() when you load the page.
Furthermore, domTab deletes the last link inside the elements to be hidden, if this link points back to the menu via '#top'. If you want to use another anchor name for the beggining of your page, you can change the backToMenu variable.
Please ensure that each link does have a corresponding element with the right ID. domTab will not throw an error, but fail to hide the element.
<ul id="mainnav"> <li><a href="#what">What is domTab?</a></li> <li><a href="#how">How to use domTab</a></li> <li><a href="#redesign">Redesigning domTab</a></li> <li><a href="#failures">Failures and Issues</a></li> </ul> <div id="what">... <a href="#top">back to menu</a></div> <div id="how">... <a href="#top">back to menu</a></div> <div id="redesign">... <a href="#top">back to menu</a></div> <div id="failures">... <a href="#top">back to menu</a></div>
domTab automatically highlights the first element, if you want to change this behaviour, you can set the target in the URL.
In the above example a http://www.example.com/index.html#failures would highlight the failures tab.
To avoid a lot of looping and guessing of next and last siblings, domTab uses two global variables: currentTab, currentLink and tabHighlightClass. Please avoid using other scripts that use these.
domTab does not add any presentation to the markup, just functionality. The whole look and feel is kept in the Style Sheet. Initially, the main element needs to have an id of mainnav, which gets changed to mainnavtabbed and the class that gets added to the active link is called tabon. These settings can be overwritten by changing the variables in the source.
domTab comes with a demo CSS (this one), but you can choose any you want.
Good examples can be found at Listamatic's horizontal menu section.
Please be also aware that every time you use a tabbed interface, you do simulate a "website in a page", which could lead to people getting frustrated trying to go back with the browser back button.