沐鳴註冊網站_使用原生js實現選項卡功能實例教程

沐鳴測速

選項卡是前端常見的基本功能，它是用多個標籤頁來區分不同內容，通過選擇標籤快速切換內容。學習本教程之前，讀者需要具備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選項卡功能。

站長推薦

1.雲服務推薦: 國內主流雲服務商，各類雲產品的最新活動，優惠券領取。地址：阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台，如果你有流量，可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/8663