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>