使用原生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选项卡功能。