复制代码代码如下:
<!doctype html公共” - // W3C // DTD XHTML 1.0 Transitional // en>
<头>
<meta http-equiv =“ content-type” content =“ text /html; charset = gb2312” />
<title>点击切换和自动切换选项卡</title>
<style type =“ text/css”>
*{列表风格:无; margin:0;填充:0;溢出:隐藏}
。
。
li {float:左;宽度:99px; text-align:中心; line-height:28px;高度:28px; cursor:cursor:pointer; border-left:#a8c29f solid 1px; color:#666; font; font-size; font-size:14px; 14px; yesidfl:hidden}}}}}}}}
.menudiv {width:399px;高度:300px; border-left:#a8c29f实心1px; border-right:#a8c29f solid 1px; border-top:0; brounder-top:0; background:#fefefe}
。
.off {背景:#e0e2eb;颜色:#336699; font-权衡:bold}
</style>
<脚本类型=“ text/javascript”>
函数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 _”+名称+“ _”+i);
如果(i == cursel){
菜单。className=“ off”;
menudiv.Style.display =“ block”;
}
别的{
菜单。className=“”;
menudiv.style.display =“ none”;
}
}
}
函数next(){
cursel_0 ++;
如果(cursel_0> links_len)cursel_0 = 1
settab(name_0,cursel_0);
}
var name_0 ='一个';
var cursel_0 = 1;
var links_len,iintervalid;
onload =功能(){
var links = document.getElementById(“ tab1”)。getElementsbytagname('li')
links_len = links.length;
for(var i = 0; i <links_len; i ++){
链接[i] .onmouseover = function(){
clear Interval(iintervalid);
}
}
document.getElementById(“ con _”+name_0+“ _”+links_len).parentnode.onmouseover = function(){
clear Interval(iintervalid);
}
settab(name_0,cursel_0);
}
</script>
</head>
<身体>
<H3> </h3>
<div ID =“ TAB1”>
<div>
<ul>
<li id =“ One1” OnClick =“ Settab('One',1)”>标签1</li>
<li id =“ One2” OnClick =“ Settab('One',2)”>标签2</li>
<li id =“ One3” OnClick =“ settab('One',3)”>标签3</li>
<li id =“ One4” OnClick =“ Settab('One',4)”>标签4</li>
</ul>
</div>
<div>
<div id =“ con_one_1”> <h4 style =“颜色:红色”>标签1-内容</h4> </div>
<div id =“ con_one_2” style =“ display:none;”> <h4 style =“颜色:红色”>标签2-内容</h4> </div> </div>
<div id =“ con_one_3” style =“ display:none;”> <h4 style =“颜色:红色”>标签3-内容</h4> </div> </div>
<div id =“ con_one_4” style =“ display:none;”> <h4 style =“颜色:red”>标签4-内容</h4> </div> </div>
</div>
</div>
</body>