<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Click Switch and Auto Switch tab </title>
<style type= "Text/css" >
*{list-style:none;margin:0;padding:0;overflow:hidden}
. Tab1{width:401px;border-top: #A8C29F solid 1px;border-bottom: #A8C29F solid 1px;margin:50px 200px;}
. Menu{width:400px;background: #eee; Height:28px;border-right: #A8C29F solid 1px;border-bottom: #A8C29F solid 1px;}
Li{float:left;width:99px;text-align:center;line-height:28px;height:28px;cursor:pointer;border-left: #A8C29F Solid 1px;color: #666; Font-size:14px;overflow:hidden}
. Menudiv{width:399px;height:300px;border-left: #A8C29F solid 1px;border-right: #A8C29F solid 1px;border-top:0; Background: #fefefe}
. Menudiv div{padding:15px;line-height:28px;}
. off{background: #E0E2EB; color: #336699; Font-weight:bold}
</style>
<script type= "Text/javascript" >
function Settab (Name,cursel) {
Cursel_0=cursel;
for (var i=1; i<=links_len; i++) {
var menu = document.getElementById (name+i);
var menudiv = document.getElementById ("Con_" +name+ "_" +i);
if (I==cursel) {
Menu.classname= "Off";
menudiv.style.display= "Block";
}
else{
Menu.classname= "";
Menudiv.style.display= "None";
}
}
}
function Next () {
cursel_0++;
if (Cursel_0>links_len) cursel_0=1
Settab (NAME_0,CURSEL_0);
}
var name_0= ' one ';
var cursel_0=1;
var links_len,iintervalid;
Onload=function () {
var links = document.getElementById ("Tab1"). getElementsByTagName (' Li ')
Links_len=links.length;
for (var i=0; i<links_len; i++) {
Links[i].onmouseover=function () {
Clearinterval (Iintervalid);
}
}
document.getElementById ("Con_" +name_0+ "_" +links_len). Parentnode.onmouseover=function () {
Clearinterval (Iintervalid);
}
Settab (NAME_0,CURSEL_0);
}
</script>
<body>
<div class= "Tab1" id= "Tab1" >
<div class= "Menu" >
<ul>
<li id= "one1" onclick= "Settab (' one ', 1)" > Label 1</li>
<li id= "One2" onclick= "Settab (' One ', 2)" > Label 2</li>
<li id= "One3" onclick= "Settab (' One ', 3)" > Label 3</li>
<li id= "One4" onclick= "Settab (' One ', 4)" > Label 4</li>
</ul>
</div>
<div class= "Menudiv" >
<div id= "Con_one_1" >
<div id= "con_one_2" style= "Display:none;" >
<div id= "Con_one_3" style= "Display:none;" >
<div id= "Con_one_4" style= "Display:none;" >
</div>
</div>
</body>
