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";
}
}
End of File
#行文過程中出現錯誤或不妥之處在所難免，希望大家能夠給予指正，以免誤導更多人，也希望大家多多支持劇本之家。
以上是JavaScript實作Tab點擊切換實例程式碼分享（圖文）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
