自創簡易CSS Tab 選項卡
阿新 • • 發佈：2017-08-06
選中 dem top ive load fun .cn click 綜合
前段時間我註冊了 w3c.run域名，打算做一個W3C相關技術在線試驗工具。沒錯，就是在線編寫html、css、js代碼然後在線運行，查看效果。
在設計首頁時，我打算首頁提供三個代碼編輯器，介於界面大小限制，不宜同時顯示三個編輯器，考慮采用tab選項卡切換的方式展現。
另外考慮到頁面加載速度問題（我可能是個性能狂），找了幾個他人寫的tab，感覺都不太理想，主要是代碼量有些大，有的甚至要用特定js庫。
於是我幹脆自己寫了一個。代碼量很小，相對還算靈活吧，可以再稍加css修飾使其更加上檔次。
效果圖：
代碼：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>輕量級CSS tab</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <style type="text/css"> 7 html,body{font-family:Arial;font-size:12px;text-align:center;} 8 9.tab {width:800px;height:600px;background:#fff;margin:auto;margin-top:20px;} 10 .tab_header {height:30px;line-height:30px;margin-left:1px;} 11 .tab_normal {width:100px;height:30px;line-height:30px;margin-left:-1px;text-align:center;float:left;color:#66f;border-top:1px solid #66f;border-right:1px solid #66f;border-left:1px solid #66f;position:relative;z-index:100;border-radius:5px 5px 0 0;margin-top:1px;} 12 .tab_acvite {width:100px;height:30px;line-height:30px;margin-left:-1px;text-align:center;float:left;color:#66f;border-top:2px solid #66f;border-right:1px solid #66f;border-left:1px solid #66f;position:relative;z-index:200;border-radius:5px 5px 0 0;border-bottom:1px solid #fff;} 13 .tab_bodyer div {width:100%;height:100%;border:1px solid #66f;margin-top:2px;text-align:left;display:block;} 14 15 </style> 16 17 18 <script type="text/javascript"> 19 20 //tab 初始化、事件添加 21 function init(){ 22 var tab_header = document.getElementById("tab_header").getElementsByTagName("DIV"); 23 for(var i=0;i<tab_header.length;i++){ 24 tab_header[i].setAttribute("index",i); 25 tab_header[i].onclick=function(event){ 26 activeTab(this.getAttribute("index")); 27 } 28 } 29 activeTab(0); 30 } 31 32 //tab選中函數 33 function activeTab(index){ 34 35 var tab_header = document.getElementById("tab_header").getElementsByTagName("DIV"); 36 var tab_bodyer = document.getElementById("tab_bodyer").getElementsByTagName("DIV"); 37 for(var i=0;i<tab_header.length;i++){ 38 if(i==index){ 39 tab_header[i].className="tab_acvite"; 40 tab_bodyer[i].style.display="block"; 41 }else{ 42 tab_header[i].className="tab_normal"; 43 tab_bodyer[i].style.display="none"; 44 } 45 } 46 47 } 48 49 </script> 50 51 </head> 52 <body style="padding:0px;margin:0px;text-align:center;" onload="init()"> 53 54 <div class="tab"> 55 56 <div id="tab_header" class="tab_header"> 57 <div>HTML</div> 58 <div>CSS</div> 59 <div>Javascript</div> 60 <div>Console</div> 61 <div style="color:green;margin-left:10px;">Run</div> 62 <div style="float:right;">guide</div> 63 <div style="float:right;">demo</div> 64 </div> 65 <div id="tab_bodyer" class="tab_bodyer"> 66 <div style="display:none;"> 67 <br>HTML <br><br><br><br><br><br><br><br><br> 68 </div> 69 <div style="display:none;"> 70 <br>CSS <br><br><br><br><br><br><br><br><br> 71 </div> 72 <div style="display:none;"> 73 <br>Javascript <br><br><br><br><br><br><br><br><br> 74 </div> 75 <div style="display:none;"> 76 <br>Console <br><br><br><br><br><br><br><br><br> 77 </div> 78 <div style="display:none;"> 79 <br>Run <br><br><br><br><br><br><br><br><br> 80 </div> 81 <div style="display:none;"> 82 <br>content guide<br><br><br><br><br><br><br><br><br> 83 </div> 84 <div style="display:none;"> 85 <br>content demo<br><br><br><br><br><br><br><br><br> 86 </div> 87 </div> 88 89 90 91 </div> 92 93 94 95 </body> 96 97 </html>
原理：
1.tab選項和內容分別由一堆div構成，分別放到選項容器、內容容器的div裏。
2.tab選項各項通過float:left，浮動顯示成一排。
3.為tab選項的默認狀態、被選中狀態編寫css樣式。
4.用javascript編寫選項卡點擊切換事件處理代碼，切換動作實際上就是修改dom的className值。
5.被選中選項卡與內容區融合效果是采用的修改底部邊框顏色與選項卡margin-top綜合控制的。
自創簡易CSS Tab 選項卡