javascript 實現tab選項卡
阿新 • • 發佈：2019-02-19
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab選項卡</title> <style> *{ padding: 0px; margin: 0px; font-family: microsoft yahei; font-size: 14px; } #tab{ width: 333px; height: 300px; position:absolute; top: 100px; left: 100px; } /*選項卡標籤樣式*/ .tab_tit{ width: 80px; height: 25px; line-height: 25px; border-radius: 4px 4px 0px 0px; background: #f60; color: #fff; text-align: center; display: inline-block; } .tab_tit:hover{ background: #090; } .active{ background: #090; } .tab_con{ height: 100%; padding: 10px; border: 1px solid #999; border-radius: 0px 0px 4px 4px; display: none; } .visiable{ display: block; } </style> <script type="text/javascript"> /** * 切換選項卡 * @return {[type]} [description] */ function switch_tab() { var tits = document.getElementsByClassName("tab_tit"); var cons = document.getElementsByClassName("tab_con"); for (var i = 0; i < tits.length; i++) { tits[i].index = i ; tits[i].onclick = function () { for (var i = 0; i < tits.length; i++) { tits[i].className="tab_tit"; }; this.className +=" active"; //切換選項卡對應的content for (var i = 0; i < cons.length; i++) { cons[i].className = "tab_con"; }; //根據tab的index屬性來操作對應的tab標籤 cons[this.index].className += " visiable"; } } } //當window載入完成操作 window.onload = function(){ switch_tab(); } </script> </head> <body> <div id="tab"> <div class="tab_tit">標籤1</div> <div class="tab_tit">標籤2</div> <div class="tab_tit">標籤3</div> <div class="tab_tit">標籤4</div> <div class="tab_con visiable">內容1</div> <div class="tab_con">內容2</div> <div class="tab_con">內容3</div> <div class="tab_con">內容4</div> </div> </body> </html>