A popular Tab switching effect code on the internet, mainly used for navigation.

Popular onlineTabThe code for switching results is mainly used for navigation.

<Div class ="Tab">
<Div id = "tabsk">
<Ul id = "menu4">
<Li onclick = "settab (4, 0) "Class =" hover "> <a Title =" Latest Update "> <span> latest update </span> </a> </LI>
<Li onclick = "settab (4, 1)"> <a Title = "Enterprise News"> <span> enterprise news </span> </a> </LI>
<Li onclick = "settab (4, 2)"> <a Title = "industry news"> <span> industry news </span> </a> </LI>
<Li onclick = "settab (4, 3)"> <a Title = ""> <span> </span> </a> </LI>
<Li onclick = "settab (4, 4)"> <a Title = "Tech News"> <span> tech news </span> </a> </LI>
</Ul>
</Div>
<Div class ="Tab2 "id =" main4 ">
<Ul class = "Block"> </ul>
<Ul> </ul>
<Ul> </ul>
<Ul> </ul>
<Ul> </ul>
</Div>
</Div>

CSS:

# Tabsk {
Float: left;
Width: 100%;
Line-Height: normal;
Border-bottom: 1px solid # 54545c;
}
# Tabsk ul {
Margin: 0;
Padding: 10px 10px 0 10px;
List-style: none;
}
# Tabsk Li {
Display: inline;
Margin: 0;
Padding: 0;
Cursor: pointer;
}
# Tabsk {
Float: left;
Background: URL ("image/Tableftk.gif") No-repeat left top;
Margin: 0;
Padding: 0 0 0 4px;
Text-Decoration: none;
}
# Tabsk a span {
Float: left;
Display: block;
Background: URL ("image/tabrightk.gif") No-repeat right top;
Padding: 8px 16px 4px 6px;
Color: # FFF;
}
# Tabsk a span {float: none ;}
/* End IE5-Mac hack */
# Tabsk A: hover span {
Cursor: pointer;
Color: # FFF;
Background-position: 100%-42px;
}
# Tabsk A: hover {
Background-position: 0%-42px;
Cursor: pointer;
}
# Tabsk. Hover
{
Background-position: 0%-42px;
}
# Tabsk. Hover Span
{
Background-position: 100%-42px;
}
.Tab2 uL
{
Display: none;
List-style-type: none;
Height: 560px;
}
.Tab2 uL Li
{
Text-align: left;
Line-Height: 20px;
Text-indent: 1em;
}
.Tab2. Block
{
Display: block;
}

JS:

<Script language = "JavaScript"> <! --
Function settab (m, n ){
VaR TLI = Document. getelementbyid ("menu" + M). getelementsbytagname ("Li ");
VaR MLI = Document. getelementbyid ("Main" + M). getelementsbytagname ("Ul ");
For (I = 0; I <TLI. length; I ++ ){
TLI [I]. classname = I = n? "Hover ":"";
MLI [I]. style. Display = I = n? "Block": "NONE ";
}
}
// --> </SCRIPT>

And the two images used: