复制代码代码如下 :
<! doctype html public "-// w3c // dtd xhtml 1.0 전환 // en">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = gb2312" />
<title> </title>
<스타일 유형 = "텍스트/CSS">
*{목록 스타일 : 없음; 마진 : 0; 패딩 : 0; 오버플로 : 숨겨진}
.TAB1 {너비 : 401px; 경계선 :#A8C29F 솔리드 1px; 경계방 :#A8C29F 솔리드 1px; 마진 : 50px 200px;}
.menu {너비 : 400px; 배경 : #eee; 높이 : 높이 : 28px; 경계-권리 :#a8c29f Solid 1px; 경계방 :#A8C29F Solid 1PX;}
li {float : 왼쪽; 너비 : 99px; 텍스트-정렬 : 중심; 선-하이이트 : 28px; 높이 : 28px; 커서 : 포인터; 경계-왼쪽 :#a8c29f solid 1px; 컬러 :#666; 글꼴 크기 : 14px; 오버 플로우 : 숨겨진}
.menudiv {너비 : 399px; 높이 : 300px; 경계-왼쪽 :#a8c29f Solid 1px; Border-Right :#A8C29F Solid 1px; Border-Top : 0; 배경 : #fefefe}
.menudiv div {패딩 : 15px; 선-높이 : 28px;}
.OFF {배경 :#e0E2EB; 색상 :#336699; 글꼴 중량 : BOLD}
</스타일>
<script type = "text/javaScript">
함수 settab (이름, cursel) {
cursel_0 = cursel;
for (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";
}
또 다른{
menu.className = "";
menudiv.style.display = "none";
}
}
}
기능 다음 () {
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);
}
</스크립트>
</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 = "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>