Edit: Unfortunately, in between blog migrations, I’ve long ago lost the source code to this. It would have been nice to have retained it as part of my programming journey.
I needed a light-weight tabbing widget for one of the projects I was working on, and not finding anything satisfactory, decided to throw one together.
The objective was to make it as simple to use as possible. The content to be tabbed should be marked up like so:
<div id="tab1" class="tabbable">1st tab</div>
<div id="tab2" class="tabbable">2nd tab</div>
Important things to note, IDs must be defined, and the class set to
There should be an empty
div to hold the generated tabs.
A call to initialise the script is made in the window
There is only one compulsory parameter, and that is the default active tab. There are two optional parameters,
tabNav defines the id for the HTML element to hold the tabs in and defaults to
tablist if undefined, and
tabClass defines the class of the tabbable content, which defaults to
The script is built from the prototype
getElementsByClass functions as presented by Dustin Diaz.