复制代码代码如下::
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = gb2312" />
<title> 点击切换和自动切换选项卡 </title>
<style type = "text/css">
*{Listenstil: Keine; Rand: 0; Polster: 0; Überlauf: versteckt}
.tab1 {width: 401px; border-top:#a8c29f fest 1px; Border-Bottom:#a8c29f Solid 1px; Margin: 50px 200px;}
.Menu {Breite: 400px; Hintergrund: #eee; Höhe: 28px; Grenzrechte:#A8C29f Solid 1px; Border-Bottom:#A8C29f Solid 1px;}
li {float: links; Breite: 99px; Text-Align: Mitte; Linienhöhe: 28px; Höhe: 28px; Cursor: Pointer; Border-Links:#a8c29f Solid 1px; Farbe:#666; Schriftgröße: 14px; Überlauf: Hidden}
.menudiv {width: 399px; Höhe: 300px; Border-Links:#a8c29f Solid 1px; Grenzrechte:#A8C29f Solid 1px; Border-Top: 0; Hintergrund: #fefefe}
.Menudiv div {padding: 15px; Linienhöhe: 28px;}
.off {Hintergrund:#e0e2eb; Farbe:#336699; Schriftgewicht: BOLD}
</style>
<script type = "text/javaScript">
Funktionsabteilung (Name, Cursel) {
CURSEL_0 = CURSEL;
für (var i = 1; i <= links_len; i ++) {
varmenü = document.getElementById (Name+i);
var menudiv = document.getElementById ("con _"+name+"_"+i);
if (i == cursel) {
Menü.ClassName = "off";
Menudiv.Style.display = "Block";
}
anders{
Menü.ClassName = "";
Menudiv.Style.Display = "Keine";
}
}
}
Funktion next () {
CURSEL_0 ++;
if (cursel_0> links_len) cursel_0 = 1
settab (name_0, cursel_0);
}
var name_0 = 'eins';
var cursel_0 = 1;
var links_len, iIntervalid;
onload = function () {
var links = document.getElementById ("tab1"). getElementsByTagName ('li')
links_len = links.length;
für (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);
}
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 = "settab ('One', 2)"> 标签 2 </li>
<li id = "ein3" 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 = "color: rot"> 标签 1- 内容 </h4> </div>
<div id = "con_one_2" style = "display: keine;"> <h4 style = "color: rot"> 标签 2- 内容 </h4> </div>
<div id = "con_one_3" style = "display: keine;"> <h4 style = "color: rot"> 标签 3- 内容 </h4> </div>
<div id = "con_one_4" style = "display: keine;"> <h4 style = "color: rot"> 标签 4- 内容 </h4> </div>
</div>
</div>
</body>