复制代码代码如下:
<! 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">
*{list-style: none; margin: 0; padding: 0; overflow: hidden}
.tab1 {width: 401px; border-top:#a8c29f solid 1px; border-bottom:#a8c29f solid 1px; margin: 50px 200px;}
.MENU {WIDTH: 400PX; พื้นหลัง: #EEE; ความสูง: 28PX; ชายแดนขวา:#A8C29F แข็ง 1PX;
Li {Float: ซ้าย; Width: 99px; Text-Align: Center; Line-Height: 28px; ความสูง: 28px; เคอร์เซอร์: ตัวชี้; ชายแดนซ้าย:#A8C29F ของแข็ง 1px; สี:#666; Font-size: 14px;
.MenUDIV {WIDTH: 399PX; ความสูง: 300PX; ชายแดนซ้าย:#A8C29F SOLID 1PX; ชายแดนขวา:#A8C29F SOLID 1PX; Border-Top: 0; พื้นหลัง: #fefefe}
.Menudiv div {padding: 15px; สายไฟ: 28px;}
.off {พื้นหลัง:#e0e2EB; สี:#336699; FONT-WEIGHT: BOLD}
</style>
<script type = "text/javascript">
ฟังก์ชั่น setTab (ชื่อ, Cursel) {
cursel_0 = cursel;
สำหรับ (var i = 1; i <= links_len; i ++) {
var menu = document.getElementById (ชื่อ+i);
var menudiv = document.getElementById ("con _"+ชื่อ+"_"+i);
ถ้า (i == Cursel) {
menu.className = "ปิด";
menudiv.style.display = "block";
-
อื่น{
menu.className = "";
menudiv.style.display = "ไม่มี";
-
-
-
ฟังก์ชั่นถัดไป () {
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;
สำหรับ (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>
<body>
<H3> </h3>
<div id = "tab1">
<div>
<ul>
<li id = "one1" onclick = "settab ('one', 1)"> 标签 1 </li>
<li id = "one2" onclick = "settab ('one', 2)"> 标签 2 </li>
<li id = "one3" 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 = "สี: สีแดง"> 标签 1- 内容 </h4> </div>
<div id = "con_one_2" style = "จอแสดงผล: ไม่มี;"> <h4 style = "สี: สีแดง"> 标签 2- 内容 </h4> </div>
<div id = "con_one_3" style = "จอแสดงผล: ไม่มี;"> <h4 style = "สี: สีแดง"> 标签 3- 内容 </h4> </div>
<div id = "con_one_4" style = "จอแสดงผล: ไม่มี;"> <h4 style = "สี: สีแดง"> 标签 4- 内容 </h4> </div>
</div>
</div>
</body>