复制代码代码如下:
<! Doctype html public "-// w3c // dtd xhtml 1.0 Переход // en">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> 点击切换和自动切换选项卡 </title>
<стиль типа = "text/css">
*{СПИСКАЯ СТИЛЕ: Нет; Маржа: 0; PADDIND: 0; переполнение: скрыто}
.tab1 {width: 401px; граница-вершина:#a8c29f Solid 1px; пограничный пакет:#a8c29f Solid 1px; маржа: 50px 200px;}
.menu {ширина: 400px; фон: #eee; высота: 28px; граница правая:#a8c29f Solid 1px; Border-Bottom:#a8c29f Solid 1px;}
li {float: слева;
.menudiv {ширина: 399px; высота: 300px; граница-лето:#a8c29f Solid 1px; граница правая:#a8c29f Solid 1px; граница: 0; фон: #fefe}
.menudiv div {padding: 15px; line-height: 28px;}
.Off {founale:#e0e2eb; Color:#336699; Font-Weight: Bold}
</style>
<script type = "text/javascript">
функция Settab (имя, cursel) {
cursel_0 = cursel;
for (var i = 1; i <= links_len; i ++) {
var menu = document.getElementbyId (имя+i);
var menudiv = document.getElementbyId ("con _"+name+"_"+i);
if (i == cursel) {
menu.classname = "off";
menudiv.style.display = "block";
}
еще{
menu.classname = "";
menudiv.style.display = "none";
}
}
}
функция 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 ++) {
ссылки [i] .onmouseover = function () {
ClearInterval (iIntervalid);
}
}
Document.getElementById ("con _"+name_0+"_"+links_len) .parentnode.onmouseover = function () {
ClearInterval (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 = "cettab ('One', 2)"> 标签 2 </li>
<li id = "one3" onclick = "cettab ('One', 3)"> 标签 3 </li>
<li id = "one4" onclick = "cettab ('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>