复制代码代码如下:
<! Doctype html público "-// w3c // dtd xhtml 1.0 transitional // en">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> 点击切换和自动切换选项卡 </title>
<style type = "text/css">
*{Estilo de lista: Ninguno; Margen: 0; Padding: 0; Overflow: Hidden}
.tab1 {ancho: 401px; border-top:#a8c29f sólido 1px; border-bottom:#a8c29f sólido 1px; margen: 50px 200px;}
.menu {ancho: 400px; fondo: #eee; altura: 28px; border-right:#a8c29f sólido 1px; border-bottom:#a8c29f sólido 1px;}
li {float: izquierda; ancho: 99px; text-align: centro; line-height: 28px; altura: 28px; cursor: pointer; borde-izquierda:#a8c29f sólido 1px; color:#666; font-size: 14px; Overflow: Hidden}
.Menudiv {ancho: 399px; altura: 300px; borde-izquierda:#a8c29f sólido 1px; border-right:#a8c29f sólido 1px; border-top: 0; fondo: #fefefe}
.Menudiv Div {Padding: 15px; Line-Height: 28px;}
.Off {fondo:#e0e2eb; color:#336699; font-weight: bold}
</style>
<script type = "text/javaScript">
function settab (nombre, cursel) {
cursel_0 = cursel;
para (var i = 1; i <= links_len; i ++) {
var menú = document.getElementById (nombre+i);
var menudiv = document.getElementById ("Con _"+nombre+"_"+i);
if (i == cursel) {
menú.classname = "Off";
menudiv.style.display = "bloque";
}
demás{
menú.classname = "";
menudiv.style.display = "Ninguno";
}
}
}
función 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 () {
enlaces var = document.getElementById ("Tab1"). GetElementsBytagName ('Li')
links_len = links.length;
for (var i = 0; i <links_len; i ++) {
enlaces [i] .onmouseover = function () {
ClearInterval (iintervalid);
}
}
document.getElementById ("con _"+name_0+"_"+links_len) .parentNode.onmouseover = function () {
ClearInterval (iintervalid);
}
settab (name_0, cursel_0);
}
</script>
</ablo>
<Body>
<h3> </h3>
<div id = "tab1">
<div>
<ul>
<li id = "one1" onClick = "settab ('uno', 1)"> 标签 1 </li>
<li id = "one2" onClick = "settab ('uno', 2)"> 标签 2 </li>
<li id = "one3" onClick = "settab ('uno', 3)"> 标签 3 </li>
<li id = "one4" onClick = "settab ('uno', 4)"> 标签 4 </li>
</ul>
</div>
<div>
<div id = "con_one_1"> <h4 style = "color: rojo"> 标签 1- 内容 </h4> </div>
<div id = "con_one_2" style = "display: none;"> <h4 style = "color: rojo"> 标签 2- 内容 </h4> </div>
<div id = "con_one_3" style = "display: none;"> <h4 style = "color: rojo"> 标签 3- 内容 </h4> </div>
<div id = "con_one_4" style = "display: none;"> <h4 style = "color: rojo"> 标签 4- 内容 </h4> </div>
</div>
</div>
</body>