HTML:
Copy codeThe Code is as follows:
<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:
Copy codeThe Code is as follows:
# 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:
Copy codeThe Code is as follows:
<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: