New: If the URL of the page links directly to one of the tabs it get automatically highlighted.
You can define with an extra class if you want previous and next links or not.
To do: internal links highlighting tabs (too busy for that now)
Applying DOMtab to your pages is easy, all you need is to call the script in the head of the document:
DOMtab expects the following classes and element structure to work:
<div class="domtab"> <ul class="domtabs"> <li><a href="#t1">Test 1</a></li> <li><a href="#t2">Test 2</a></li> [... and so on ...] </ul> <div> <h2><a name="t1" id="t1">Proof 1</a></h2> <p>Test to prove that more than one menu is possible</p> <p><a href="#top">back to menu</a></p> </div> <div> <h2><a name="t2" id="t2">Proof 2</a></h2> <p>Test to prove that more than one menu is possible</p> <p><a href="#top">back to menu</a></p> </div> [... and so on ...] </div>
The showing and hiding of sections is achieved by reading out the hash data of the link url and retrieving the parent element of the element with the ID the original link points to.
The links to remove are identified via a pattern in their href attribute, preset to "#top".
If there is an element with the id domtabprintview in the document, DOMtab will create a link to show all elements in this one.
You can change all the settings in the script itself, as all HTML expections are parameters:
tabClass:'domtab', // class to trigger tabbing listClass:'domtabs', // class of the menus activeClass:'active', // class of current link contentElements:'div', // elements to loop through backToLinks:/#top/, // pattern to check "back to top" links printID:'domtabprintview', // id of the print all link showAllLinkText:'show all content', // text for the print all link
In this version I added the option to have previous and next links to navigate around the tabs in addition to clicking them.
If you want DOMtab to generate those, all you need to do is to add the class "doprevnext" in addition to the domtab class to the div in question:
<div class="domtab doprevnext"> <ul class="domtabs"> <li><a href="#t1">Test 1</a></li> <li><a href="#t2">Test 2</a></li> <li><a href="#t3">Test 3</a></li> <li><a href="#t4">Test 4</a></li> </ul> [... ad nauseam...] </div>
DOMtab then generates the following link list in each of the sections, automatically removing the previous link in the first and the next in the last section:
<ul class="prevnext"> <li class="prev"><a href="#">previous</a></li> <li class="next"><a href="#">next</a></li> </ul>
Once again, you can override any of these settings in the script's parameters:
prevNextIndicator:'doprevnext', // class to trigger links prevNextClass:'prevnext', // class of the prev and next list prevLabel:'previous', // HTML content of the prev link nextLabel:'next', // HTML content of the next link prevClass:'prev', // class for the prev link nextClass:'next', // class for the next link
Both labels are set via innerHTML rather than the proper method :-). This allows you to use images if wanted:
prevLabel:'<img src="massivebuttonprev.png" alt="previous" />',
Using the mandatory classes domtab for the main DIV of each menu, and domtabs for the menu list, you can pretty much style your menus any way you want to.
DOMtab adds the class "active" to the LI containing the currently active link, to allow you to highlight the currently chosen tab.
The previous and next links get classes on their own, which makes it easy to style them differently.
If you want to avoid the initial flash of all the content until the script kicks in, you can cheat by adding the following code in the head right after the script element with the domtab call: