JS原生Tab标签切换

http://www.w3cmark.com/demo/demo13.html

 1 //js实现代码
 2 <script language="javascript">
 3 window.onload=function(){
 4 var nav=document.getElementById("tab").getElementsByTagName("li");  
 5 var con=document.getElementById("con").getElementsByTagName("div");
 6 for(i=0;i<nav.length;i++){
 7     nav[i].index = i;
 8     nav[i].onmouseover=function(){
 9         for(var n = 0; n < con.length; n++) {
10             con[n].style.display = "none";
11             nav[n].className = "";
12         }
13         con[this.index].style.display = "block"
14         nav[this.index].className = "cur";
15         }
16     
17     }
18 }
19 </script>

CSS样式：

1 .nav{ height:30px;}
2 .nav li{ display:inline-block; width:100px; height:30px;line-height:30px; float:left; cursor:pointer; text-align:center;background:#ddd;}
3 .nav li.cur{color:#fff;background:#f60}
4 .con{ display:none; padding-top:10px;}

HTML代码：

 1 <div class="box">
 2 
 3 <div class="box">
 4 <div class="nav" id="tab">
 5     <ul>
 6         <li class="cur">菜单一 </li>
 7         <li>菜单二 </li>
 8         <li>菜单三 </li>
 9         <li>菜单四 </li>
10     </ul>
11 </div>
12 <div id="con">
13 <div class="con" style="display:block">
14 <ul>
15     <li>11111111111111111111</li>
16     <li>11111111111111111111</li>
17     <li>11111111111111111111</li>
18     <li>11111111111111111111</li>
19     <li>11111111111111111111</li>
20 </ul>
21 </div>
22 <div class="con">
23 <ul>
24     <li>222222222222222222222</li>
25     <li>222222222222222222222</li>
26     <li>222222222222222222222</li>
27     <li>222222222222222222222</li>
28     <li>222222222222222222222</li>
29 </ul>
30 </div>
31 <div class="con">
32 <ul>
33     <li>333333333333333333</li>
34     <li>333333333333333333</li>
35     <li>333333333333333333</li>
36     <li>333333333333333333</li>
37     <li>333333333333333333</li>
38 </ul>
39 </div>
40 <div class="con">
41 <ul>
42     <li>44444444444444444444</li>
43     <li>44444444444444444444</li>
44     <li>222222222222222222222</li>
45     <li>222222222222222222222</li>
46     <li>222222222222222222222</li>
47 </ul>
48 </div>
49 </div>
50 </div>
51 
52 </div>

posted on 2017-03-20 16:17 heylucky 阅读(485) 评论(0) 编辑收藏举报