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 - VBScript Subroutines (Page 3 of 5 )
VBScript is all about subroutines, small modules of script that execute independently; define the first subroutine, which is an onLoad event and sets how the page initially looks:
sub window_onLoad() content1.style.visibility="hidden" content2.style.visibility="hidden" content3.style.visibility="hidden" content4.style.visibility="hidden" startmessage.style.visibility="visible" end sub
Next, add the subroutine to execute if and when tab1 is clicked:
sub tab1_onClick() tab1.style.zindex="3" tab2.style.zindex="2" tab3.style.zindex="1" tab4.style.zindex="0" content1.style.visibility="visible" content2.style.visibility="hidden" content3.style.visibility="hidden" content4.style.visibility="hidden" startmessage.style.visibility="hidden" end sub
Repeat this subroutine another three times, one for each of the remaining tabs which the visitor/user can click:
sub tab2_onClick() tab2.style.zindex="3" tab1.style.zindex="2" tab3.style.zindex="1" tab4.style.zindex="0" content1.style.visibility="hidden" content2.style.visibility="visible" content3.style.visibility="hidden" content4.style.visibility="hidden" startmessage.style.visibility="hidden" end sub sub tab3_onClick() tab3.style.zindex="3" tab1.style.zindex="2" tab2.style.zindex="1" tab4.style.zindex="0" content1.style.visibility="hidden" content2.style.visibility="hidden" content3.style.visibility="visible" content4.style.visibility="hidden" startmessage.style.visibility="hidden" end sub sub tab4_onClick() tab4.style.zindex="3" tab1.style.zindex="2" tab2.style.zindex="1" tab3.style.zindex="0" content1.style.visibility="hidden" content2.style.visibility="hidden" content3.style.visibility="hidden" content4.style.visibility="visible" startmessage.style.visibility="hidden" end sub
Now just add the end comment wrapper and close off the script: