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! 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.

open or close right navigation


Version History
Short information
Long Information
Installation notes
Usage notes
Demo URLs
Known Bugs

Category: Javascript Version:2.2
Last page update:16.07.2004

»Download domTab.

»Launch domTab.

Version History

- 2.2 fixed FireFox issues and added the ability to highlight other tabs than the first one onload..
- 2.1 added ID change for the original menu and removal of "back to top" links.
- 2.0 complete revamp
- 1.0 Initial release

Short information

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.

back up


- Do not use it for non-private, profit orientated sites.
back up


- Javascript enabled browser
back up

Long information

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.

back up

Installation Notes

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.

back up

Usage Notes

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.


		<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>
		<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 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.

back up

Demo pages

- Demopage
back up

Known Bugs

- 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.
back up




Click to decrease fontsizeClick to increase fontsize



sponsored by :



Help, donate via paypal




Link to us

copy the code here:

Powered by EasyCMS