JavaScript實作Tab點擊切換實例程式碼分享（圖文）

Tab 選項卡切換效果在現如今的網頁中，運用的也是比較多的，包括點擊切換、滑動切換、延遲切換、自動切換等多種效果，在這篇博文裡，我們是透過原生JavaScript 來實現Tab 點擊切換的效果。

Tab 選項卡切換效果在現如今的網頁中，運用的也是比較多的，包括點擊切換、滑動切換、延遲切換、自動切換等多種效果，在這篇博文裡，我們是透過原生Javascript 來實現Tab 點選切換的效果

1.功能實作

html 部分

<button style="background-color:#f60; color: #fff;">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<p style="display:block;">第一个Nian糕</p>
<p>第二个Nian糕</p>
<p>第三个Nian糕</p>

css 部分

p {
 display: none;
 width: 155px;
 height: 100px;
 border: 1px solid #000;
}

接下來是JS 部分，根據每一步要實現的功能，進而轉換成程式碼，每當我們要實現一個效果的時候，先不要急著敲程式碼，而是先思考要怎麼去實現，結構是什麼樣的，某個功能需要用到什麼事件等等，自己在腦海裡把整個流程過一遍，再去把每一步的邏輯轉換成程式碼

a. 取得元素

var btnList = document.getElementsByTagName("button");
var pList = document.getElementsByTagName("p");

註解： document.getElementsByTagName 回傳的是一個[類數組物件]，可以使用數組的方法對其進行處理，但類別數組物件並不具有數組所具有的方法

b. 給元素綁定點擊事件

//第一个按钮的点击事件
btnList[0].onclick = function () {
 btnList[0].style.color = "#fff";
 btnList[0].style.backgroundColor = "#f60";
 btnList[1].style.color = "";
 btnList[1].style.backgroundColor = "";
 btnList[2].style.color = "";
 btnList[2].style.backgroundColor = "";
 pList[0].style.display = "block";    
 pList[1].style.display = "none";    
 pList[2].style.display = "none";    
}

//第二个按钮的点击事件
btnList[1].onclick = function () {
 btnList[0].style.color = "";
 btnList[0].style.backgroundColor = "";
 btnList[1].style.color = "#fff";
 btnList[1].style.backgroundColor = "#f60";
 btnList[2].style.color = "";
 btnList[2].style.backgroundColor = "";  
 pList[0].style.display = "none";    
 pList[1].style.display = "block";    
}

//第三个按钮的点击事件
btnList[2].onclick = function () {
 btnList[0].style.color = "";
 btnList[0].style.backgroundColor = "";
 btnList[1].style.color = "";
 btnList[1].style.backgroundColor = "";
 btnList[2].style.color = "#fff";
 btnList[2].style.backgroundColor = "#f60";
 pList[0].style.display = "none";    
 pList[1].style.display = "none";    
 pList[2].style.display = "block";  
}

現在我們已經實現了一個Tab 切換的效果了，來看一下效果

雖然很簡陋，但已經達到我們想要的效果了，讀者可根據自己想要的樣式來設定CSS，接下來我們要做的就是，對JS 程式碼進行最佳化

2. 最佳化

a. 取得元素

var btnList = document.getElementsByTagName("button");
var pList = document.getElementsByTagName("p");

b. 給每一個button 元素綁定點擊事件

for(var i = 0; i < btnList.length; i++ ) {
 btnList[i].index = i; //给每个按钮添加index属性，标记是第几个按钮
 btnList[i].onclick = function() {
  for(var j = 0; j < btnList.length; j++) {
   //将所有的按钮样式去掉，块隐藏
   btnList[j].style.color = "";
   btnList[j].style.backgroundColor = "";
   pList[j].style.display = "none";
  }
  //给点击的按钮添加样式，对应的块显示
  this.style.color = "#fff";
  this.style.backgroundColor = "#f60";
  pList[this.index].style.display = "block";
 }
}

index 傳回字元位置，它是被搜尋字串中第一個成功匹配的開始位置，從零開始

this 是Javascript 的一個關鍵字，它代表函數運行時，自動產生的一個內部物件，只能在函數內部使用this，關於this 的值，會跟隨函數使用場景的不同而發生變化，但是我們只需要記住一個原則就可以了，this指的是呼叫函數的那個物件

在這裡this 指向對應的點擊按鈕，我們可以透過控制台列印來看到this 所輸出的內容

3. Let 指令

ES 6 中新增了 let 指令，用來宣告變數，其用法類似 var，但是所宣告的變數，只在 let 指令所在的程式碼區塊內有效

在上面的程式碼中，我們在程式碼區塊裡，分別用var 和 let 宣告了兩個變量，接著在程式碼區塊內外列印這兩個變量，可以看到，var 聲明的變數傳回了正確的值，程式碼區塊內列印let 宣告的變數傳回了正確的值，而在程式碼區塊外列印let 宣告的變數報錯，這表明，let 宣告的變數只在它所在的程式碼區塊有效

上面程式碼中，變數i 是var 宣告的，在全域範圍內都有效，所以全域只有一個變數 i，每一次循環，變數 i 的值都會改變，而迴圈內被賦給陣列 a 的function 在運行時，會透過閉包讀到這同一個變數i，導致最後輸出的是最後一輪的 i 的值，也就是10，而如果使用 let，宣告的變數只在區塊層級作用域內有效，最後輸出的是 6

#a. 取得元素

var btnList = document.getElementsByTagName("button");
var pList = document.getElementsByTagName("p");

##b.給每一個button 元素綁定點擊事件

for(let i = 0; i < btnLists.length; i++) {
 btnLists[i].onclick = function() {
  for(var j = 0;j < btnLists.length;j++){
   btnLists[j].style.color="";
   btnLists[j].style.backgroundColor="";
   pLists[j].style.display="none";
  }
  this.style.color = "yellow";
  this.style.backgroundColor="#f60";
  pLists[i].style.display="block";
 }
}

同樣的，我們也是控制台來列印一下i 的值

End of File

#行文過程中出現錯誤或不妥之處在所難免，希望大家能夠給予指正，以免誤導更多人，也希望大家多多支持劇本之家。

以上是JavaScript實作Tab點擊切換實例程式碼分享（圖文）的詳細內容。更多資訊請關注PHP中文網其他相關文章！