tab栏切换的实现

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>

效果图：