案例：tab栏切换功能

①Tab栏切换有2个大的模块

②上面的选项卡模块，点击某一个，当前这个底色会是红色，其余不变（排他思想），用修改类名的方式

③下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面

④规律：下面的模块显示内容和上面的选项卡一一对应相匹配。

⑤核心思路：给上面的tab_list里面的所有小li添加自定属性index，属性值从0开始编号

⑥当我们点击tab_list里面的某个小li，让tab_con里面对应序号的内容显示，其余隐藏（排他思想）

<div class="tab_list">
    <ul>
        <li class="current">商品介绍</li>
        <li>规格与包装</li>
        <li>商品评价（50000）</li>
        <li>售后保障</li>
        <li>手机社区</li>
    </ul>
</div>    
<div class="detail_tab_con" style="display: block;">
    <div class="item">与商品介绍的内容相对应</div>
    <div class="item">与规格与包装的内容相对应</div>
    <div class="item">与商品评价（50000）的内容相对应</div>
    <div class="item">与售后保障的内容相对应</div>
    <div class="item">与手机社区的内容相对应</div>
</div>

<script>
    // 1.上面的模块选项卡，点击某一个，当前这个底色会是红色，其余不变（排他思想），修改类名的方式
    // 获取元素
    var tab_list = document.querySelector('.tab_list');
    var lis = tab_list.querySelectorAll('li');
    var items = document.querySelectorAll('.item');
    // for循环绑定点击事件
    for (var i = 0; i < lis.length; i++) {
        // 开始给5个小li设置索引号（自定义属性）
        lis[i].setAttribute('index', i);
        lis[i].onclick = function() {
            // 首先清除其余li的当前选中的class类样式
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = '';
            }
            // 然后再给当前选中的li添加当前选中的class类样式
            this.className = 'current';
            // 下面的显示内容模块
            var index = this.getAttribute('index');
            // 首先隐藏其他item的内容
            for (var i = 0; i < items.length; i++) {
                items[i].style.display = 'none';
            }
            // 然后只显示当前选中的tab栏内容
            // display: block不仅有转换为块元素的意思，也有显示的意思
            items[index].style.display = 'block';
        }
    }
</script>