Implementing Tabs in Web Design

Xah Lee, 2006-02

Tabs is a web design that arose in about 1999. This page is a tutorial on implementing tabs using DHTML.

Here are some screenshots of tabs in popular sites:

Design Analysis: There are 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.

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 this can be done, see Changing HTML) 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 Change Styles)

For the program logic, we need to have a way to register a click on the tab, and each page must be able to tell if it is the current page. There are many ways to implement these. How to implement it depends on what technologies are you using. Such as Pretty Home Page, JSP, Perl with CGI, LISP, or other languages and HTTP related technologies. With in a technology, you may also want to use cookies, or its built-in user sessions functionalities. Here, we show a example using just JavaScript.

Click on each of the tab above and you can switch to different tabs. The tabs are done as cells inside a table. Each table cell has a “id” attribute. For example, “<td id="a" class="tab">Tab A</td>” . These id are used in JavaScript to define them as buttons. This is the line:

document.getElementById("a").onclick = function () {open("a.html","_self");};

So, when user clicks on a tab, the window loads the file associated with that tab.

Once a new page is loaded, we need to make sure that page's tab is ON, and the other tabs are OFF. This is done by having each page run a function when it loads. The line looks like this:

<body onload="f()">

The function f will find out which is the current tab by using the “document.location.pathname”. Then, it goes thru each tab and change it's background color according to whether it is the current tab. View Source to study the code.

The tabs on this page has the look of buttons than the traditional tabbed pages such as Apple's site. We have now covered the gist of implementing tabs. The appearance can be achieved thru style sheets. In particular, if you use textual buttons as your tabs, then you can have it show all borders except the bottom, to achieve a look such that the current tab flows into the page.

For a implementation of Tab Menu with CSS only, see Tab Menu with CSS.