Tab导航栏切换在网页场景中十分常见，本文将介绍如何用js来实现交互的导航栏。
分析：
1.当鼠标点击上面相应的选项卡（tab），下面盒子的内容跟随变化
2.点击某一个选项，当前这一个底色会变成红色，字体变白色，其余不变。
3.下面的模块显示内容需要和上面选项卡一一对应，互相匹配。
思路：可以给选项卡添加自定义属性（索引号index），属性值从0开始编号。当点击某个选项卡，下面模块显示对应index的内容，其余隐藏。（排他思想）
一、自定义属性
1.自定义属性的目的
为了保存并使用数据，可以避免复杂的操作，数据不用存储到数据库中。
2.自定义属性的操作
自定义属性和元素自带属性不同，它是由程序员自己定义的属性。对属性的操作不再用”对象.属性“的形式，下面举例介绍下三个操作方法：<div data-index='1'></div>
div.getAtrribute(‘data-index’):获取属性data-index的值
div.setAttribute(‘data-set’,‘2’): 添加属性data-set且值为‘2’
div.removeAttribute(‘data-set’):移除data-set属性
3.规范
由于有些自定义属性很容易引起分歧，不容易判断是元素的内置属性还是自定属性，H5规定自定义属性data-开头做为属性名并且赋值。
同时还引入了dataset集合，它是一个存放了所有以data开头的自定义属性集合。我们可以用它来取值。
例如：
<div data-index='0'></div>
用div.dataset[index’]或者div.dataset.index取值
HTML：
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>商品评价(100万+)</li>
<li>售后保障</li>
</ul>
</div>
<div class="tab_con">
<div class="item">
品牌：Apple 商品名称：AppleiPhone 12 操作系统：iOS(Apple) 商品编号：100009077475 商品毛重：320.00g
</div>
<div class="item">
规格与包装 主体 首销日期：23日 产品名称：iPhone 12 上市月份：10月 入网型号：A2404 上市年份：2020年
</div>
<div class="item">
商品评价 运行非常流畅，轻松到手⑤千1，是从底下视频拿到的！拍照效果一流，这款刚出来的紫色非常喜欢，外形设计漂亮，屏幕显示出众，音质也非常完美，不错的。手机包装也很好，发货速度很快，非常的漂亮，很喜欢。双摄像头拍照，很快5G运行，速度也很棒非常的满意。双扬声器音质很棒，新的外观设计看起来非常的绚丽，手感也很好，玻璃质感很好。系统确认比安卓的流畅多了，尺寸刚刚好，不会太大屏幕细腻，色彩还原度高，采用高通基带，5G信号还是不错的，上网速度快特别喜欢紫色，颜值特别高没办法不热爱。当收藏款来购买的啊，这次京东商城活动力度大就入手了。非常流畅，屏幕显示细腻，看着很舒服，夜景提升很大，拍出来的效果非常符合苹果的水准，和以往的苹果无home键，需要点时间去适应。手机外型尺寸正合适，对经典的直角边设计也非常适应。使用感受特别好，开机顺畅，按键灵敏，运行速度快，待机时间长，音效好，拍照清晰，内存足够充足！立刻下载了好多实用软件，非常开心！太小刚刚好，挺顺手的，经典的直边边框手感不错，苹果的优势是系统，系统不用说了，运行流畅的代名词。非常流畅，屏幕显示细腻，看着很舒服，夜景提升很大，拍出来的效果非常符合苹果的水准。
</div>
<div class="item">
售后保障模块内容 厂家服务 本商品质保周期为1年质保，在此时间范围内可提交维修申请，具体请以厂家服务为准。 如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在质保期内享受免费保修等三包服务！ (注:如厂家在商品介绍中有售后保障的说明,则此商品按照厂家说明执行售后保障服务。)
</div>
</div>
</div>
CSS：
<style>
.tab {
margin: 0 auto;
width: 800px;
padding-top: 20px;
}
.tab_list {
height: 50px;
border-bottom: 1px solid red;
}
.tab_list ul {
padding-left: 0px;
height: 50px;
}
.tab li {
float: left;
display: inline-block;
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
text-align: center;
height: 50px;
line-height: 50px;
margin: 0;
}
.item {
display: none;
}
.current {
background-color: brown;
color: white;
}
</style>
JS：
<script>
var tab_list = document.querySelector('.tab_list');
var list = tab_list.querySelectorAll('li');//获取所有的选项卡标签
var items = document.querySelectorAll('.item');//获取所有的内容显示模块
//在循环中添加点击事件，为每个选项卡添加索引index
for (var i = 0; i < list.length; i++) {
list[i].setAttribute('index', i);
//排他思想
list[i].onclick = function() {
//1.点击后先消除所有选项卡的样式
for (var i = 0; i < list.length; i++) {
list[i].className = '';
}
//2.绑定当前选项卡的样式(实现背景色变红)
this.className = 'current';
//内容显示模块
var index = this.getAttribute('index');//先获得当前点击选项卡的索引值
//1.将所有模块隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
//2.再显示对应index下的模块
items[index].style.display = 'block';
}
}
</script>
效果图：
