選項卡是前端常見的基本功能，它是用多個標籤頁來區分不同內容，通過選擇標籤快速切換內容。學習本教程之前，讀者需要具備html和css技能，同時需要有簡單的javascript基礎。
先來完成html部分。首先，需要一個元素把整個選項卡包含在內。新建一個div元素，它的id命名為tabBox，如下所示：
<div id="tabBox"></div>
在tabBox元素裡面，再把選項卡分為標籤和內容兩個部分，分別命名class為label_box和content_box，如下所示：
<div id="tabBox" class="tab_box"> <ul class="label_box"></ul><!--標籤部分--> <div class="content_box"></div><!--內容部分--> </div>
一般情況下，標籤元素和內容元素的數量要保持一致，在本例項中把標籤和內容都設為三個。 分別在label_box和content_box元素中新增標籤和內容，如下所示：
<div id="tabBox" class="tab_box"> <ul class="label_box"><!--標籤部分--> <li>選項一</li> <li>選項二</li> <li>選項三</li> </ul> <div class="content_box"><!--內容部分--> <div class="content">內容一</div> <div class="content">內容二</div> <div class="content">內容三</div> </div> </div>
為了讓選項卡好看一點，讀者可以根據自己喜好加上一些樣式，也可以直接複製以下樣式程式碼使用：
.tab_box{ width:600px; margin:30px auto; } .label_box{ padding-left:30px; font-size:0; } .label_box li{ display:inline-block; line-height:30px; height:30px; padding:0 10px; margin:0 5px; font-size:14px; border:1px solid #2d9aff; border-bottom:none; border-top-left-radius:4px; border-top-right-radius:4px; cursor:pointer; } .label_box li.active{ background:#2d9aff; color:#fff; } .content_box{ padding:20px; border:1px solid #2d9aff; border-radius:4px; box-shadow:0px 0px 6px #aaa; } .content_box .content{ display:none; height:300px; }
完成html和css部分之後，再來使用js實現標籤切換的功能。本例項把選項卡功能封裝到函式中，所以先建立一個primaryTab函式，在primaryTab中再來編寫具體程式碼。
筆者建議在完成某一個前端功能時，應先分析功能的具體操作。再根據具體操作把實現功能的方法分成多個步驟，接下來一個步驟一個步驟去完成它。
選項卡的操作非常簡單，就是選擇標籤（可以是點選，也可以是滑鼠滑過,本例項使用點選事件）時，快速切換內容且修改當前啟用標籤樣式。預設情況下第一個標籤元素為當前啟用狀態，第一個內容元素需要顯示。把這樣一個操作，在實現功能上來可分成三個步驟：
1 獲取標籤元素和內容元素
2 給第一個標籤元素新增active樣式修改為啟用狀態；把第一個內容元素通過樣式display:bolock來顯示。
3 在標籤上新增事件，實現切換內容
3.1 遍歷標籤，給每一個標籤新增事件
3.2 在事件函式中遍歷標籤，把每一個標籤的className改為空字串，用於刪除啟用標籤樣式。
3.3 在事件函式中遍歷內容元素，把每一個內容元素通過樣式設定為隱藏。
3.4 在事件函式中通過this找到當前標籤元素，設定className，修改當前標籤元素樣式為啟用狀態。
3.5 在事件函式中通過變數找到對應的內容元素，並通過樣式設定為顯示。
具體程式碼如下：
function primaryTab(){ //1.獲取選項卡外包元素 var eTab = document.getElementById('tabBox'); //1.獲取標籤外包元素 var eLabel = eTab.getElementsByClassName('label_box')[0]; //1.獲取所有標籤元素的集合 var aLabels = eLabel.getElementsByTagName('li'); //1.獲取內容外包元素 var eContent = eTab.getElementsByClassName('content_box')[0]; //1.獲取所有內容元素的集合 var aContents = eContent.getElementsByClassName('content'); //2.給第一個標籤元素新增active樣式修改為啟用狀態 aLabels[0].className = 'active'; //2.把第一個內容元素通過樣式display:bolock來顯示 aContents[0].style.display = 'block'; //3.1 遍歷標籤，注意：本例項這裡宣告變數i只能用let，如果用var會出錯 for(let i=0;i<aLabels.length;i++){ //3.1 給每一個標籤新增點選事件 aLabels[i].onclick = function(){ //3.2 遍歷標籤 for(let n=0;n<aLabels.length;n++){ //3.2 把每一個標籤的className改為空字串，用於刪除啟用標籤樣式。 aLabels[n].className = ''; //3.3 因為標籤元素和內容元素數量相同，所以可通過變數n把每一個內容元素通過樣式設定為隱藏 aContents[n].style.display = 'none'; } // 3.4 通過this找到當前標籤元素，修改當前標籤元素為啟用狀態。 this.className = 'active'; //3.5 通過變數i找到對應的內容元素，並通過樣式設定為顯示。 aContents[i].style.display = 'block'; } } } //呼叫選項卡函式 primaryTab();
好了，就是這麼簡單，相信通過本教程的學習，你一定很輕鬆可以掌握JS選項卡功能。