前端----tab选项卡，选项卡兼容IE5~IE11
样式不好看，各位大佬有能力美化一下，我主要实现功能==
看代码。
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title></title> 6 <meta charset="utf-8"> 7 </head> 8 <style type="text/css"> 9 *{ 10 margin: 0; 11 } 12 .tab{ 13 padding: 10px; 14 15 } 16 .tab_default{ 17 background-color: red; 18 } 19 .tab_title { 20 list-style: none; 21 } 22 23 .tab_title li { 24 display: block; 25 width: 50px; 26 height: 15px; 27 margin-left: 5px; 28 line-height: 15px; 29 border-width: 1px 1px 0px 1px; 30 border-style: solid; 31 border-color: black; 32 cursor: pointer; 33 float: left; 34 } 35 36 .tab_main { 37 width: 700px; 38 height: 200px; 39 border: 1px solid; 40 clear: both; 41 overflow: auto; 42 } 43 </style> 44 <script type="text/javascript" charset="utf-8"> 45 window.onload = function() { 46 var tabLIst = classQuery("tab"); 47 for(var i = 0; i < tabLIst.length; i++) { 48 var tab_mainList = classQuery("tab_container", tabLIst[i])[0].children; 49 for(var j = 0; j < tab_mainList.length; j++) { 50 if(j == 0) { 51 tab_mainList[i].style.display = ""; 52 } else { 53 tab_mainList[j].style.display = "none"; 54 } 55 } 56 57 //tab切换firstChild 58 var tab_ulLIst = classQuery("tab_title", tabLIst[i].children[0]); 59 for(var k = 0; k < tab_ulLIst.length; k++) { 60 var tab_lis = tab_ulLIst[k].children; 61 for(var a = 0; a < tab_lis.length; a++) { 62 tab_lis[a].onclick = function(e) { 63 var tab_mainList = this.parentNode.parentNode.parentNode.children[1].children; 64 var tabList = this.parentNode.children; 65 for (var c=0;c<tab_mainList.length;c++) { 66 if(tabList[c]!= this){ 67 tabList[c].style.backgroundColor = "white"; 68 tab_mainList[c].style.display="none"; 69 }else{ 70 tabList[c].style.backgroundColor = "red"; 71 tab_mainList[c].style.display=""; 72 } 73 } 74 75 } 76 } 77 } 78 } 79 } 80 81 //class选择器 82 function classQuery(clsName, ele) { 83 var list = []; 84 var domLIst; 85 if(ele == null || ele == "" || ele == undefined) { 86 domLIst = document.getElementsByTagName("*"); 87 } else { 88 domLIst = ele.children; 89 } 90 91 for(var i = 0; i < domLIst.length; i++) { 92 if(domLIst[i].className == clsName) { 93 list.push(domLIst[i]); 94 } 95 } 96 return list; 97 } 98 </script> 99 100 <body> 101 <div class="tab"> 102 <div> 103 <ul class="tab_title"> 104 <li class="tab_default">苹果</li> 105 <li>香蕉</li> 106 <li>葡萄</li> 107 </ul> 108 </div> 109 <div class="tab_container"> 110 <div class="tab_main"> 111 苹果 112 </div> 113 <div class="tab_main"> 114 香蕉 115 </div> 116 <div class="tab_main"> 117 葡萄 118 </div> 119 </div> 120 </div> 121 122 <div class="tab"> 123 <div> 124 <ul class="tab_title"> 125 <li class="tab_default">苹果</li> 126 <li>香蕉</li> 127 <li>葡萄</li> 128 </ul> 129 </div> 130 <div class="tab_container"> 131 <div class="tab_main"> 132 苹果 133 </div> 134 <div class="tab_main"> 135 香蕉 136 </div> 137 <div class="tab_main"> 138 葡萄<p></p> 139 葡萄<p></p> 140 葡萄<p></p> 141 葡萄<p></p> 142 葡萄<p></p> 143 葡萄<p></p> 144 葡萄<p></p> 145 葡萄<p></p> 146 葡萄<p></p> 147 葡萄<p></p> 148 葡萄<p></p> 149 葡萄<p></p> 150 葡萄<p></p> 151 葡萄<p></p> 152 葡萄<p></p> 153 葡萄<p></p> 154 葡萄<p></p> 155 葡萄<p></p> 156 葡萄<p></p> 157 葡萄<p></p> 158 葡萄<p></p> 159 葡萄<p></p> 160 </div> 161 </div> 162 </div> 163 </body> 164 165 </html>
