學習javascript物件導向 執行個體講解物件導向選項卡_javascript技巧

本文執行個體講解了最簡單的物件導向選項卡實現方法，分享給大家供大家參考，具體內容如下

效果圖：

1、功能說明

點擊三個按鈕分別顯示對應的選項卡
2、html代碼說明

<div class="box" id="box"> <ul class="list">  <li class="in_active">第一張選項卡</li>  <li class="in">第二張選項卡</li>  <li class="in">第三張選項卡</li> </ul> <nav class="conList">  <a class="con_active" href="javascript:;">第一個控制按鈕</a>  <a class="con" href="javascript:;">第二個控制按鈕</a>  <a class="con" href="javascript:;">第三個控制按鈕</a> </nav> </div>

3、css重點代碼說明

/*in為選項卡普通狀態，預設不顯示*/.in,.in_active{ display: none; width: 600px; height: 100px; background: orange; font-size: 50px; line-height: 100px; text-align: center;}/*in_active為選項卡選中狀態，選中後顯示*/.in_active{ display: block;}/*con為按鈕普通狀態，預設文字顏色為黑色*/.con,.con_active{ color: black; background-color: orange;}/*con_active為按鈕選中狀態，選中後文字顏色為白色*/.con_active{ color: white; }

4、js代碼說明

function Tab(obj){ /*元素擷取*/ //擷取選項卡展示部分 this.oList = obj.getElementsByTagName('ul')[0]; this.aIn = this.oList.getElementsByTagName('li'); //擷取選項卡控制部分 this.oConList = obj.getElementsByTagName('nav')[0]; this.aCon = this.oConList.getElementsByTagName('a'); /*變數設定*/ //選項卡張數 this.count = this.aIn.length; //當前第幾張 this.cur = 0; var _this = this; for(var i = 0; i < this.count; i++){  //設定索引  this.aCon[i].index = i;  //給按鈕添加事件  this.aCon[i].onclick = function(){   _this.cur = this.index;   _this.switch();  } }}Tab.prototype.switch = function(){ //去掉所有 for(var i = 0; i < this.count; i++){  this.aIn[i].className = 'in';  this.aCon[i].className = 'con'; } //顯示當前 this.aIn[this.cur].className = 'in_active'; this.aCon[this.cur].className = 'con_active'; }//擷取選項卡元素var oBox = document.getElementById('box');//構造選項卡對象var tab1 = new Tab(oBox);

希望本文所述對大家學習javascript物件導向有所協助。