复制代码代码如下:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en">
<head>
<meta http-equiv = "konten-tipe" content = "text /html; charset = gb2312" />
<title> 点击切换和自动切换选项卡 </iteme>
<type style = "text/css">
*{List-style: none; margin: 0; padding: 0; overflow: tersembunyi}
.tab1 {lebar: 401px; border-top:#a8c29f solid 1px; border-bottom:#a8c29f solid 1px; margin: 50px 200px;}
.menu {width: 400px; latar belakang: #eee; tinggi: 28px; border-right:#a8c29f solid 1px; border-bottom:#a8c29f solid 1px;}
Li {float: left; width: 99px; text-align: center; line-height: 28px; Height: 28px; kursor: pointer; border-left:#a8c29f solid 1px; warna:#666; font-ukuran: 14px; meluap: tersembunyi}
.menudiv {lebar: 399px; tinggi: 300px; border-left:#a8c29f solid 1px; border-kanan:#a8c29f solid 1px; border-top: 0; latar belakang: #fefefe}
.menudiv div {padding: 15px; line-height: 28px;}
.off {latar belakang:#e0e2eb; warna:#336699; font-weight: bold}
</tyle>
<type skrip = "Teks/JavaScript">
fungsi settab (name, cursel) {
cursel_0 = cursel;
untuk (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";
}
kalau tidak{
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;
untuk (var i = 0; i <links_len; i ++) {
tautan [i] .onmouseOver = function () {
clearInterval (iintervalid);
}
}
document.geteLementById ("con _"+name_0+"_"+links_len) .parentnode.onmouseover = function () {
clearInterval (iintervalid);
}
settab (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>