標籤：
利用最基礎的物件導向的思想，實現tab選項卡效果：
效果：
HTML代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>物件導向的tab選項卡實現</title> <link rel="stylesheet" href="tab.css"></head><body> <div class="box" id="box"> <ul class="conList"> <li class="conli on">第一張選項卡</li> <li class="conli">第二張選項卡</li> <li class="conli">第三張選項卡</li> </ul> <nav class="btnList"> <a class="btn on" href="javascript:;">第一個控制按鈕</a> <a class="btn" href="javascript:;">第二個控制按鈕</a> <a class="btn" href="javascript:;">第三個控制按鈕</a> </nav> </div> <script src="tab.js"></script></body></html>
CSS代碼(tab.css)：
*{ margin: 0; padding: 0 }/*in為選項卡普通狀態，預設不顯示*/.conList .conli{ display: none; width: 600px; height: 100px; background: orange; font-size: 50px; line-height: 100px; text-align: center;}.conList .on{ display: block;}/*控制按鈕地區*/.btnList{ margin-top: 6px;}/*btn為按鈕普通狀態，預設文字顏色為黑色*/.btnList .btn{ display: inline-block; color: black; background-color: orange; padding: 6px; text-decoration:none;}.btnList .on{ background-color: #7a4201; color: #fff;}/*btn_active為按鈕選中狀態，選中後文字顏色為白色*/.btn_active{ color: white; }
JS代碼(tab.js)：
// 定義建構函式var TabSwitch = function(parent){ // 擷取內容地區 this.ulList = parent.getElementsByTagName(‘ul‘)[0]; this.liList = this.ulList.getElementsByTagName(‘li‘); //擷取控制按鈕 this.btnList = parent.getElementsByTagName(‘nav‘)[0]; this.btns = this.btnList.getElementsByTagName(‘a‘); // 添加事件 this.totalNum = this.btns.length;
this.curIndex = 0;
var _this = this;
for(var i = 0; i<this.totalNum; i++){
//方法一 // 設定索引 this.btns[i].index = i; // 每個按鈕點擊事件 this.btns[i].onclick = function(){ _this.curIndex = this.index; _this.toSwitch(); }
//方法二：利用閉包
// this.btns[i].onclick = (function(i){
// return function(){
// _this.curIndex = i;
// _this.toSwitch();
// }
// })(i) } }TabSwitch.prototype.toSwitch = function(){ //把所有的控制地區on樣式清空 for(var i = 0; i<this.totalNum; i++){ this.btns[i].className = ‘btn‘; this.liList[i].className = ‘conli‘; } // 為當前點擊按鈕設定樣式 this.btns[this.curIndex].className += ‘ on‘; // 為當前按鈕對應選項設定樣式 this.liList[this.curIndex].className += ‘ on‘;}// 執行個體var oBox = document.getElementById(‘box‘);var tab01 = new TabSwitch(oBox);
參考：http://www.cnblogs.com/xiaohuochai/p/4803964.html
物件導向的tab選項卡實現
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
