Click here to Skip to main content
13,452,206 members (54,504 online)
Click here to Skip to main content
Add your own
alternative version


56 bookmarked
Posted 18 Sep 2003

DHTML Web Tab Control

, 18 Sep 2003
Rate this:
Please Sign up or sign in to vote.
A simple client-side dynamic web tab control.

Sample screenshot


This article describes how to implement a simple client-side web tab control using HTML, JavaScript and CSS. The web tab control is highly configurable, allowing content to be specified from local or remote sources, specifying a default selected tab upon loading the page and customizing the look & feel of it.


Essentially, the web tab control is composed of HTML buttons for the tabs and an <IFRAME> for the main content area:


The HTML button tabs and <IFRAME> main content area are separated into two <DIV> container objects so that, upon resizing the browser window, the web tab control maintains structure, avoiding overlapping that may possibly be caused by positioning attributes.


The tabs and their respective local/remote content sources are specified in an array; each string item in the array represents a tab and details of it separated by a “|” pipe character. Note that each string item is followed by a “,” comma, except the last item:

var tabs = new Array

In general, each tab item in the array of tab string items, follows this template:

"Tab-text | URI | [*]" 
  • Tab-text: This is the first part of each item which represents the text that appears on a tab.
  • URI: This is the second part after the first “|” pipe character and is the tab’s respective URI content source.

Optionally, a second “|” pipe character followed by a “*” wildcard character after specifying the URI will make that specific tab, a default selected tab when the page loads:


Finally, the <DIV> container objects are declared in the body of the web page:

<DIV ID="divTabButtons"></DIV>
<DIV ID="divTabFrame"></DIV>

…and the web tab control initialized via calling the tabLoad method:

<BODY onLoad="tabLoad()">

Look & Feel

The look & feel of the web tab control is adjusted entirely through the use of CSS. The <IFRAME> main tab content area design is specified by the .tabFrame style:

    ORDER: 0;
    HEIGHT: 90%;
    WIDTH: 100%;

In its default unselected state, a tab button’s design is defined by the .tabOff style:

    FONT-FAMILY: Verdana;
    FONT-SIZE: 11;   
    FONT-WEIGHT: 700;
    COLOR: #003399;
    BACKGROUND-COLOR: #c4e0f0;  
    HEIGHT: 25;


When a tab button is clicked (tab selected), its design state is defined by the .tabOn style:

    FONT-FAMILY: Verdana;
    FONT-SIZE: 11;    
    FONT-WEIGHT: 700;
    COLOR: #003399;
    HEIGHT: 35;

The BORDER-TOP color style attribute of the <IFRAME> main tab content area .tabFrame has to be (well, works best) the same as the BORDER-BOTTOM color style attribute of the tab buttons when they are selected, .tabOn. This is so that when the tab button is selected, it will look as part of the <IFRAME> and provide a continuous and consistent look. Apart from changing colors, another difference between the .tabOn and .tabOff styles is the height of the tab button; when selected .tabOn, a tab’s height is increased, yielding it with a look of self-importance.


By means of setting a global tabAlign variable, the tabs can be aligned RIGHT, CENTER or LEFT as illustrated above.


The tabLoad method when called, creates and initializes the web tab control. First it aligns the tabs:

HTML += "<P ALIGN="+tabAlign+">";

Then for every element in the array of string items representing information about a tab, it splits the string at each “|” pipe character extracting parts of the string and creates a HTML button with the .tabOff style and assigning them with a unique ID as well as an onClick event handled by a tabOnClick method:

for (var i = 0; i < tabs.length; i++)
    var tab = tabs[i].split("|");
    HTML += "<INPUT TYPE='BUTTON' ID="+i+" 
            CLASS='tabOff' VALUE="+tab[0]+" 
            onClick='tabOnClick("+i+")'> ";

The tab buttons are then bound to the divTabButtons <DIV> container object:

divTabButtons.innerHTML = HTML;

Finally, the tabLoad method seeks out which array string item (which represents a tab and its respective information) contains a “*” wildcard character by further splitting the string at the next “|” pipe character. If found, it calls the tabOnClick method passing to it, the ID of the corresponding tab button created earlier:

for (var i = 0; i < tabs.length; i++)
    var tab = tabs[i].split("|");
    if (tab[2] == "*")

The tabOnClick method has a parameter which specifies the ID of a tab button. When called, it first sets all the tab button styles to the default .tabOff style:

var oElement = null;

for (var i = 0; i < tabs.length; i++)
    oElement = document.getElementById(i);
    oElement.className = "tabOff";

Then, with the aid of its parameter which represents the ID of a specified tab button, it sets the specified tab button’s style to .tabOn:

oElement = document.getElementById(ID);
oElement.className = "tabOn";

Finally, the tabOnClick button seeks out the relevant URI content information of the specified tab from the array of tabs and setting the <IFRAME> SRC attribute to it for displaying, the <IFRAME> is then bound to the divTabFrame <DIV> container object:

var tab = tabs[ID].split("|");
divTabFrame.innerHTML = "<IFRAME SRC="+tab[1]+ 
         " CLASS='tabFrame'></IFRAME>";

As a finishing touch, just so that the selected tab button doesn’t look so much as a button, the document body is told to steal the focus:



  • Tested only with IE6.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Steve Puri
United Kingdom United Kingdom
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralPosition of tab frame Pin
Sarah Riblon6-Aug-09 9:52
memberSarah Riblon6-Aug-09 9:52 
GeneralGood Artical Pin
parasaniasandip15-Sep-08 20:33
memberparasaniasandip15-Sep-08 20:33 
GeneralGreat Idea, pointer to FireFox compatible solution Pin
TayBill27-Jul-07 8:18
memberTayBill27-Jul-07 8:18 
Questionrefreshing within frames Pin
haskillg30-Mar-07 8:47
memberhaskillg30-Mar-07 8:47 
GeneralMind Blowing Pin
Jitku15-Oct-06 21:27
memberJitku15-Oct-06 21:27 
Delver7-Jun-06 8:32
memberDelver7-Jun-06 8:32 
JokeThe best one! Pin
BlinZaparaSEtimiImenami19-Feb-06 0:10
memberBlinZaparaSEtimiImenami19-Feb-06 0:10 
GeneralRe: The best one! Pin
Steve Puri19-Feb-06 8:37
memberSteve Puri19-Feb-06 8:37 
GeneralRe: The best one! Pin
BlinZaparaSEtimiImenami19-Feb-06 23:39
memberBlinZaparaSEtimiImenami19-Feb-06 23:39 
GeneralJavaScript Pin
casimirrex19-Nov-05 6:58
membercasimirrex19-Nov-05 6:58 
GeneralMultiple words in title Pin
gogetsome22-Sep-05 7:32
membergogetsome22-Sep-05 7:32 
GeneralRe: Multiple words in title Pin
Steve Puri22-Sep-05 8:42
memberSteve Puri22-Sep-05 8:42 
GeneralRe: Multiple words in title Pin
BlinZaparaSEtimiImenami19-Feb-06 23:38
memberBlinZaparaSEtimiImenami19-Feb-06 23:38 
GeneralRe: Multiple words in title Pin
gogetsome20-Feb-06 2:40
membergogetsome20-Feb-06 2:40 
GeneralSupport for other browsers Pin
jaemmer16-Sep-05 3:59
memberjaemmer16-Sep-05 3:59 
Questionenhancement? Pin
AnoopB15-Oct-04 4:42
memberAnoopB15-Oct-04 4:42 
AnswerRe: enhancement? Pin
AnoopB15-Oct-04 7:49
memberAnoopB15-Oct-04 7:49 
GeneralRe: enhancement? Pin
Steve Puri16-Oct-04 9:12
memberSteve Puri16-Oct-04 9:12 
GeneralRe: enhancement? Pin
AnoopB18-Oct-04 3:18
memberAnoopB18-Oct-04 3:18 
QuestionHow to pass variables between frames Pin
kishor kumar11-May-04 18:07
memberkishor kumar11-May-04 18:07 
GeneralUsability Pin
Stephane Rodriguez.19-Sep-03 20:46
memberStephane Rodriguez.19-Sep-03 20:46 
GeneralRe: Usability Pin
Steve Puri19-Sep-03 22:02
memberSteve Puri19-Sep-03 22:02 
GeneralRe: Usability Pin
Stephane Rodriguez.20-Sep-03 1:06
memberStephane Rodriguez.20-Sep-03 1:06 
GeneralRe: Usability Pin
theJazzyBrain15-Jun-04 1:27
membertheJazzyBrain15-Jun-04 1:27 
GeneralRe: Usability Pin
kishor kumar6-Oct-04 23:43
memberkishor kumar6-Oct-04 23:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180318.3 | Last Updated 19 Sep 2003
Article Copyright 2003 by Steve Puri
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid