Js TAB选项卡

效果预览:

http://jsfiddle.net/dtdxrk/kf9yR/embedded/result/

以前一直在用别人的TAB方法 今天自己写一个

在测试时才知道ie对getElementsByTagName的兼容性问题 最后放弃了使用

 1 <!DOCTYPE HTML>
 2  <html lang="en">
 3  <head>
 4    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5    <title>js TAB选项卡</title>
 6    <style type="text/css">
 7    *{margin:0;padding:0;}
 8    body{font-size: 12px;}
 9    .usual{background:#181818; color:#111; padding:15px 20px; width:500px; border:1px solid #222; margin:8px auto;}
10    .usual li{list-style:none; float:left;}
11    .usual ul a{display:block; padding:6px 10px; text-decoration:none!important; margin:1px; margin-left:0; font:10px Verdana; color:#FFF; background:#444;}
12    .usual ul a:hover{color:#FFF; background:#111;}
13    .usual ul a.selected{margin-bottom:0; color:#000; background:snow; border-bottom:1px solid snow; cursor:default;}
14    .usual div{padding:10px 10px 8px 10px; *padding-top:3px; *margin-top:-15px; clear:left; background:snow; font:10pt Georgia;}
15  </style>
16  </head>
17  
18  <body>
19  
20  <div id="usual1" class="usual"> 
21    <ul> 
22      <li><a href="#" class="selected">Tab 1</a></li> 
23      <li><a href="#">Tab 2</a></li> 
24      <li><a href="#">Tab 3</a></li> 
25    </ul> 
26    <div id="conTabs1" style="display: block; ">This is tab 1.</div> 
27    <div id="conTabs2" style="display: none; ">More content in tab 2.</div> 
28    <div id="conTabs3" style="display: none; ">Tab 3 is always last! <div>Tab 3 is always last!</div> </div> 
29  </div> 
30 
31   <div id="usual2" class="usual"> 
32    <ul> 
33      <li><a href="#" class="selected">Tab 1</a></li> 
34      <li><a href="#">Tab 2</a></li> 
35      <li><a href="#">Tab 3</a></li> 
36    </ul> 
37    <div id="wa1" style="display: block; ">This is tab 1.</div> 
38    <div id="wa2" style="display: none; ">More content in tab 2.</div> 
39    <div id="wa3" style="display: none; ">Tab 3 is always last! <div>Tab 3 is always last!</div> </div> 
40  </div> 
41  
42  
43   
44  <script type="text/javascript"> 
45  
46    function myTabs(tabId, conIds){
47 
48      var tabDIV = document.getElementById(tabId),
49          lis = tabDIV.getElementsByTagName("ul")[0].getElementsByTagName("li"),
50          lisNum = lis.length;
51     
52      for (var i = 0; i < lisNum; i++) { 
53 
54        lis[i].setAttribute("index", i+1); //给每个li加一个自定义属性保存index
55        lis[i].onclick = function(){
56 
57           var num = this.getAttribute("index");
58 
59           //删除元素的样式
60          for(var n = 0; n < lisNum; n++){  
61             lis[n].children[0].setAttribute("class", ""); //删除a元素的class
62             document.getElementById(conIds+(n+1)).style.display = "none";
63           };
64 
65          this.children[0].setAttribute("href", "javascript:return false;");
66          this.children[0].setAttribute("class", "selected"); //a元素添加class=selected
67 
68          document.getElementById(conIds+num).style.display = "block";
69        }
70 
71      };
72  
73    }
74  
75    myTabs("usual1", "conTabs");
76    myTabs("usual2", "wa");
77  </script>
78 
79  
80  </body>
81  </html>
posted @ 2012-07-05 16:39  dtdxrk  阅读(1240)  评论(0)  编辑  收藏  举报