复制代码代码如下：
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title>点击切换和自动切换选项卡</title>
<style type = "text/css">
*{リストスタイル：なし;マージン：0;パディング：0;オーバーフロー：隠し}
.tab1 {width：401px; border-top：＃a8c29f solid 1px; border-bottom：＃a8c29f solid 1px;マージン：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; anuverflow：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 setab（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";
}
それ以外{
menu.classname = "";
menudiv.style.display = "none";
}
}
}
function next（）{
cursel_0 ++;
if（cursel_0> links_len）cursel_0 = 1
setab（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）;
}
setab（name_0、cursel_0）;
}
</script>
</head>
<body>
<h3> </h3>
<div id = "tab1">
<div>
<ul>
<li id = "one1" onclick = "setab（ 'one'、1）">标签1 </li>
<li id = "one2" onclick = "setab（ 'one'、2）">标签2</li>
<li id = "one3" onclick = "setab（ 'one'、3）">标签3 </li>
<li id = "one4" onclick = "setab（ 'one'、4）">标签4</li>
</ul>
</div>
<div>
<div id = "con_one_1"> <h4 style = "color：red">标签1-内容</h4> </div>
<div id = "con_one_2" style = "display：none;"> <h4 style = "color：red">标签2-内容</h4> </div>
<div id = "con_one_3" style = "display：none;"> <h4 style = "color：red">标签3-内容</h4> </div>
<div id = "con_one_4" style = "display：none;"> <h4 style = "color：red">标签4-内容</h4> </div>
</div>
</div>
</body>