选项卡是前端常见的基本功能，它是用多个标签页来区分不同内容，通过选择标签快速切换内容。学习本教程之前，读者需要具备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选项卡功能。