HTML
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Tab切换效果</title> 6 <link rel="stylesheet" href="Tab切换.css"> 7 </head> 8 <body> 9 <ul id="tab_nav"> 10 <li class="select">tab1</li> 11 <li>tab2</li> 12 <li>tab3</li> 13 <li>tab4</li> 14 </ul> 15 <div id="tab_con"> 16 <div class="show">aaaa</div> 17 <div>bbbb</div> 18 <div>cccc</div> 19 <div>dddd</div> 20 </div> 21 <script src="Tab切换.js"></script> 22 </body> 23 </html>
Tab切换.css
1 ul,li,div { 2 padding: 0; 3 margin: 0; 4 } 5 6 ul li { 7 float: left; 8 width: 200px; 9 height: 30px; 10 line-height: 30px; 11 text-align: center; 12 background: #fff; 13 border: 1px #bbb solid; 14 border-bottom: none; 15 } 16 17 ul li.select { 18 background: #ccc; 19 color: red; 20 } 21 22 ul { 23 overflow: hidden; 24 zoom: 1; 25 list-style-type: none; 26 } 27 28 #tab_con { 29 width: 806px; 30 height: 200px; 31 } 32 33 #tab_con div { 34 width: 806px; 35 height: 400px; 36 display: none; 37 border: 1px #bbb solid; 38 border-top: none; 39 } 40 41 #tab_con div.show { 42 display: block; 43 background: #ccc; 44 }
Tab切换.js
1 var nav = document.getElementById("tab_nav"); 2 var lis = nav.getElementsByTagName("li"); 3 var divs = document.getElementById("tab_con").getElementsByTagName("div"); 4 for(var i = 0;i < lis.length;i++){ 5 lis[i].onclick = function(){ 6 for(var i = 0;i < lis.length;i++){ 7 if(this == lis[i]){ 8 lis[i].className = "select"; 9 divs[i].className = "show"; 10 }else{ 11 lis[i].className = ""; 12 divs[i].className = ""; 13 } 14 } 15 } 16 }
效果图：
