当鼠标点击上面相应的选项卡（tab），下面内容跟随变化
tab栏切换.png

案例分析：

①Tab栏切换有2个大的模块
②上的模块选项卡，点击某一个，当前这一个高亮显示，其余不变（排他思想）修改类名方式。
③下的模块内容，会跟随上面的选项卡变化。所以下面的模块变化写到点击事件里面。
④规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。
⑤核心思路：给上面的tab_list里面的所有li添加自定义属性，属性值从0开始编号。
⑥当我们点击tab_list里面的某个li，让tab_con里面对应序号的内容显示，其余隐藏（排他思想）

  1. <style><br />        *{<br />            margin: 0;<br />            padding: 0;<br />        }<br />        ul,li{<br />            list-style: none;<br />        }<br />        .tab{<br />            width: 978px;<br />            margin: 100pxauto;<br />        }<br />        .tab_list{<br />            height: 39px;<br />            border: 1pxsolid#ccc;<br />            background-color: #f1f1f1;<br />        }<br />        .tab_listli{<br />            float: left;<br />            height: 39px;<br />            line-height: 39px;<br />            padding: 020px;<br />            text-align: center;<br />            cursor: pointer;<br />        }<br />        .tab_list.current{<br />            background-color: #c81623;<br />            color: #fff;<br />        }<br />        .tab_con.item{<br />            display: none;<br />        }<br />    </style><br /></head><br /><body><br />    <div class="tab"><br />        <div class="tab_list"><br />            <ul><br />                <li class="current">商品介绍</li><br />                <li>规格与包装</li><br />                <li>售后保障</li><br />                <li>商品评价(50000)</li><br />                <li>手机社区</li><br />            </ul><br />        </div><br />        <div class="tab_con"><br />            <div class="item"style="display: block;"><br />                商品介绍模块内容<br />            </div><br />            <div class="item"><br />                规格与包装模块内容<br />            </div><br />            <div class="item"><br />                售后保障模块内容<br />            </div><br />            <div class="item"><br />                商品评价模块内容<br />            </div><br />            <div class="item"><br />                手机社区模块内容<br />            </div><br />        </div><br />    </div><br />    <script><br />        //获取元素<br />        var tab_list = document.querySelector('.tab_list');<br />        var lis = tab_list.querySelectorAll('li');<br />        var items = document.querySelectorAll('.item');<br />        //循环绑定点击事件<br />        for(i = 0 ; i < lis.length; i++){<br />            //开始给li添加自定义属性<br />            lis[i].setAttribute('data-index',i);<br />            lis[i].onclick = function () {<br />                // 1.上的模块选项卡，点击某一个，当前这一个高亮显示，其余不变（排他思想）修改类名方式<br />                //干掉所有人，其余的li清除class这个类<br />                for(var i = 0; i < lis.length; i++){<br />                    lis[i].removeAttribute('class');<br />                }<br />                //留下我自己<br />                this.className = 'current';<br />                //2.下面的显示内容模块<br />                var index = this.getAttribute('data-index');<br />                //干掉所有人<br />                for(var j = 0; j < items.length; j++){<br />                    items[j].removeAttribute('style');<br />                }<br />                //留下我自己<br />                items[index].style.display = 'block';<br />            }<br />        }<br />    </script><br /></body>

.