This illustrates how to show visitors to a site which tab they are currently on. The article outlines how to create a script that manipulates the z-indices of graphical tabs to pull the one that is clicked to the top layer and show the content in that tab. There is a simple introduction to the div tag, the z-index property and DHTML scripting in general.
Switching on Layers with Scripts - Using an Array (Page 4 of 5 )
Admittedly, the code is rather hefty for simple client-side layer switching. You could reduce the amount of code by using an array to store the z-indices of the tabs and a loop to rearrange their order upon each click, but I have found that this detracts from the look of the tabs. If you wanted to do this, you first declare the array, which would need to be global in order to be used in all of the separate subroutines:
The array has 4 values stored, but the fist value in an array is always 0, hence the 3 in brackets. Now remove all of the tab1.style.zindex="3" lines of code from all of the onclick subroutines, leaving just the visibility lines. In each of the onclick subroutines, add a subroutine call, using the tab name as an argument (remember to change the tab name in each of the calls though):
Now to create the tabchanger subroutine:
sub tabchanger(Clicked) dim Row for Row = 0 to 3 If glblTabArray(Row).style.zindex > Clicked.style.zindex Then glblTabArray(Row).style.zindex = glblTabArray(Row).style.zindex - 1 End if next Clicked.style.zindex = 3 end sub
This first sets the Row variable which will be synchronized with the z-indices, then uses a for...next loop to cycle through each of the z-indices, and changes them based on the results of the if statement. Personally, I prefer the original code. Create a file first with the original code, then with the array code, you'll notice when testing them that the tab order looks better in the original code. This is why I prefer it.