Implementing Tab Menu with JavaScript: Page A

Advertise Here For Profit

Xah Lee, 2006-02, 2011-03-15

This page is a tutorial on implementing tabs using javascript. Tabbed interface can also be done with just CSS. See: Implementing Tab Menu with CSS .

Tabs is a web design that arose in about 1999. Here's some screenshots of tabs in popular sites.

Screenshot of Amazon.

Screenshot of Ebay.

Screenshot of Yahoo!

Screenshot of Apple.

Design Analysis: There's a row of buttons on top of a page. Each button has two colors, On and Off. Each button is associated with a web page. If user clicks on a button, that page is loaded, and the button is On to indicate to user that the page is currently showing contents of that button. Meanwhile, all other buttons will be Off.

There are many ways to implement the tabbed design. There are two aspects, the look of the tabs and the program logic.

Changing Button Appearance

For the looks, the buttons can be done as images. Each button having two image representations, one for On and one for Off. To change the state, just swap the image using DOM and JavaScript. (for how, see: Changing HTML Content with Javascript) Alternatively, the buttons can also be done using style sheets. Each button is a textual link, with a background color and border. The change of button's state is done by change the background color. (See: Changing a Element's Style with Javascript.)

On this page we use table tag. Here's the tab html code:

<table border="1">
<tr>
<td id="a" class="tab">Tab A</td>
<td id="b" class="tab">Tab B</td>
<td id="c" class="tab">Tab C</td>
</tr>
</table>
<script type="text/javascript" src="tab.js"></script>

Tab Switching Programing Logic

When a tab is click, there are few things that must be done:

① Open the page associated with the tab.
② Highlight that tab's color.

Here's the js code:

// -*- coding: utf-8 -*-
// 2006-02-18
// 〈Implementing Tab Menu with JavaScript〉@ http://xahlee.info/js/tabs/a.html

/* Each tab is associated with a file. Each File name (without extension) must be the same as the tab's id. */

// a list of tab id. (file names)
var tabNames= ["a","b","c"];

function setTabColor() {
    // determine the current tab, from file path
    var fPath = document.location.pathname.split('/');
    var currentFile = (fPath[fPath.length-1]).split('.')[0]; // file name without extension

    // go thru all tabs, if match, change tab to red, else silver
    for (var α in tabNames) {
        var myObj = document.getElementById(tabNames[α]);
        if (tabNames[α] == currentFile) { myObj.style.backgroundColor="red";}
        else { myObj.style.backgroundColor="silver";}
    }
}

// set a action for each tab
document.getElementById("a").onclick = function () {open("a.html","_self");};
document.getElementById("b").onclick = function () {open("b.html","_self");};
document.getElementById("c").onclick = function () {open("c.html","_self");};

setTabColor();

In bottom few lines, we set the table cell tags to have a action. When clicked, it will open the page associated with that tab.

Then, “setTabColor” is called. It first get the file path, parse it to get the file name without the extension. Then, use that as id to set the correct tab's color.

2011-03-15

This page is written in 2006, when i just started learning js. The way it is written isn't the best practice. You should implement Tab Menu using just CSS. It's much faster and doesn't require js. See Tab Menu with CSS.