DomTab is a javascript/CSS solution to put a complete tab-navigation in one HTML document.
You are seeing this very light version of the page, as you are using an outdated
browser!
Onlinetools.org is done in XHTML 1.0 and supports CSS 2.0, please upgrade your
browser if you want a better version of this site.
Thank you, please help us developers keep up with the industry rather than patching our code for outdated applications.
domTab() is a javascript/CSS solution to display content via tabs. You can easily separate parts of the document in a visual way and still keep them in one HTML document.
domTab is a Javascript that turns a navigation list linked to anchored elements into a tabbed interface. It loops through all the links of the navigation, adds the necessary event handlers and hides all the elements but the first one. If the elements have a link back to the menu, domTab removes these for you. Furthermore, it adds a highlight class to the link of the first element. When a user clicks on any of the links, domTab hides the previously visible section and removes the highlight class of the old link, and shows the new section and adds the highlight class to the active link.
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:
<script type="text/javascript" src="domtab.js"></script>
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.
Global Variables
To avoid a lot of looping and guessing of next and last siblings, domTab uses two global variables: currentTab, currentLink and tabHighlightClass. Please avoid usingother scripts that use these.
domTab automatically connects the links to the sections to hide via the href attribute of the link. This way you can add as many elements to the navigation as possible without any need to change the Javascript.
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.
Example:
<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>
Automatic Highlighting
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.
Redesigning domTab
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.
