This very neat script is based on one I found at
HTML Goodies.
It uses pure DHTML to create the above tab menu, using DIV containers to house the various menu items.
By clicking on the desired tab, the corresponding page is displayed.
Each box can contain any type of HTML content: text, graphics, links,etc.
Although I've used the script as a simple menu in this example, it could easily be used as:
a card information system
a series of news items
a set of instructions
a small e-book
The table can be set to any size, and any number of tabs may be added.
Compatibility
Originally, the script was for IE only. But I modified it to work with:
IE 4 +
NS 6
Opera
It may even work with NS 4 (try it and see).
Paste the code below into the
head of your page:
And this in the
body itself:
How It Works
All the tabs are housed in a simple table.
The unselected tabs have the style class
tab, while the selected tab has the class
thistab.
On load, the first tab and its associated box are selected:
<TD id="tab1" class=thistab
onclick="javascript:DoChanges(1);"
height=30>Tab 1 Title
</TD>
<div class=contents id="box1" style="z-index:2">
Your Box 1 HTML goes here
</div>
With the tabs, it's simply a matter of assigning the appropriate style class.
With the boxes, it's done by manipulating their
z-index values.
All boxes have the same style class characteristics -
contents.
So they occupy
exactly the same position on the page.
But the z-index value determines the layer.
Boxes 2 - 7 have a z-index value of 1, while the value of Box 1 is 2.
Therefore it is on top of the rest.
The background colour of the boxes is the same as the selected tab.
So when a tab is clicked, it is assigned the class
thistab.
Its corresponding box is pushed to the top layer.
1. Switching Tab Style Classes
This is the trickiest part of the script, since 2 actions are required:
The clicked tab has to be assigned to the class thistab
the remaining tabs have to be assigned to the class tab
When a tab is click, it passes a numerical value to the function
DoChanges:
id="tab1" onclick="javascript:DoChanges(1);"
id="tab2" onclick="javascript:DoChanges(2);"
For tab 1, the value is 1. For tab2, the value is 2. And so on.
Using the IE (document.all) code:
function DoChanges(num)
{
i=1;
for (i=1; i<8; i++)
{
var mytab="tab" + i;
document.all(mytab).className = "tab";
if (i == num)
{
document.all(mytab).className = "thistab";
}
}
}
A counter is used to loop from 1 to 7 and reset all the tab classes to "tab"
At the same time, a check is made to see if the counter value is equivalent to the value passed.
If so, that tab is assigned the class
thistab.
2. Displaying the Correct Box
This is done by incrementing the z-index value of the selected box:
toplevel="4";
function DoChanges(num)
{
toplevel++;
var box = "box" + num;
document.all[box].style.zIndex = toplevel;
}
The counter variable
toplevel has an initial value of 4.
When a tab is clicked, the function
DoChanges is called.
The counter is incremented, and that value is assigned to the z-index value of the box.
Each time a new tab is clicked, its associated box automatically gets the top layer.
So all other boxes are hidden beneath it.
3. Browser Detection
As mentioned previously, the orignal script only worked in IE.
So I've added some browser detection code to make it more cross-compatible:
if (document.all)
{navigator.family = "ie4"}
if (window.navigator.userAgent.toLowerCase().match(/gecko/))
{navigator.family = "gecko"}
if (window.navigator.userAgent.toLowerCase().indexOf('opera') != -1)
{navigator.family = 'opera';}
"Gecko", by the way, is the engine that powers NS6.
In short:
IE 4+ : document.all
NS6 and Opera : getElementbyID
I could have just used
getElementById, which is recognised by IE 5+, Opera and NS6.
But unfortunately, not IE 4.
So I've used
document.all, which works with all IE browsers from v4.0 onwards.
Then it was simply a matter of using the appropriate code for each browser.
© 2002 CyberSchool
Last Update:
