Tab interface for static content using JavaScript Prototype

Posted on by — No Comments ↓

I wanted to make a simple as possible Tab interface, using the Prototype JavaScript library (version 1.6.0.3 in this case using the Goggle AJAX Libraries API).  Further adventures is modern javascripting….

Real world uses for this would include any time you have big long page with static chucks of text, or other content, that you want to reveal only  a bit at the time.   As demonstrated, here at tab.html, that content could be static text or images or html input fields.

The html for the Tabbed navigation is a unordered list (could be an ordered list) and anchor href links for the target id’s and text:

1
2
3
4
5
6
<ul class="TabNav" >
<li id="defaultTab"><a href="#SectionAA">A Section</a></li>
<><a href="#SectionAnother">another Section</a>
<><a href="#Section3">Section 3</a>
<><a href="#Section4">Section 4</a>
</ul>

where the target of the a href (i.e. “#Section3” i) referees to the id of the content you wish to make visible if prefixed with a pound hash (#), otherwise it acts just like a regular anchor link. (and external page links works as normal.)

I’m also assuming that the all the static content is nested under a parent tag (in this case a “div”) like this

1
2
3
4
5
6
7
<div>
<div id="SectionAA" >SectionAA content</div>
<div id="SectionAnother" >SectionAnother content </div>
<div id="Section3">section content </div>
<div id="Section4" >section content</div>
<div id="Section5" >section content</div>
</div>

the only configuration is done in the JavaScript file tab.js:

1
2
3
var navTabClass = 'TabNav';
var navTabSelectedClass = 'selectedTab';
var defaultTabId = 'defaultTab';

where 2 CSS style names are set and the default selected tab’s id is indicated.

Using the defaultTabId is optional, and if not used then the item (<li>) under the navTabClass list is used. no default demonstrates this, the JavaScript was nasty to figure out – get the element with the class and get it’s first child:

1
$$('.'+navTabClass).first().firstDescendant()

Notice that the url on the page is not being updated with the anchor name (i.e. http://www.falsepositives.com/web/tab/tab.html#Section3), since you are navigation within a page.  The default behavior can be restored by setting the variable preventDefaultEventonTabSelect to zero.  (and yes I could parse the starting url to see if a valid anchor name is supplied and use that to set the default tab, on startup.)

the trickiest part of the JavaScript is handling whether the Li is selected or “just” the text of the A link

1
2
3
4
5
6
7
    if (elm.tagName    == 'A' ) {
liElm = elm.parentNode;
aElm = elm ;
}  else {
liElm = elm;
aElm = elm.firstDescendant();
}

The CSS styling of the page tab.css I’ve also left minimalist, but workable.

Also note that if javascript is disabled, then all content is visible, and the anchor links in the tags navigate you to that location as a proper default behavior.

enjoy…

minor update/fix : the direct links to the javascript and Cascading Style Sheets (CSS) files should now work. (“sorry about that chief…”)

Leave a Reply