实现效果图

整个页面分为2个部分，tab_list部分（上半部分）和tab_con部分（下半部分）
tab_list部分包含5个li，它们分别与tab_con部分的5个div盒子一一对应
tab_list部分只有点击才会有红色背景样式，如果点击了规格与包装，那么商品介绍的样式会被清空。同时，tab_con部分的显示内容跟随tab_list部分的点击发生改变

排他思想

1.所有元素全部清除样式
2.给当前元素设置样式
3.注意顺序不能颠倒，首先干掉其他人，再设置自己

tab栏切换制作思路

1.模块选项卡，点击某一个，当前这一底色会是红色，其余不变（排他思想）修改类名的方式
2.下面的模块内容，会随着上面的选项卡变化，所以下面模块变化写到点击事件里面
3.规律：下面的模块显示内容和上面的选项卡一一对应相匹配
4.核心思路：给上面的tab_list里面的所有li添加自定义属性，属性值从0开始编号
5.当我们点击tab_list里面的某个li，让tab_con里面的对应序号内容显示，其余隐藏（排他思想）

代码部分

html部分

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

js部分

<!-- js部分 -->
    <script>
        // 1.实现tab栏的上半部分的切换，点击哪个选项卡，这个选项卡样式发生改变，点击其他选项卡，该选项卡样式变回原样
        // 采用排他思想
        // 2.实现tab栏的下半部分切换，点击上面的选项卡，其下标所对应的下半部分div则显示出来
        // 1.获取元素
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        // 2.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='';
                }
                // 留下我自己
                this.className='current';
                // 下面的显示内容模块
                var index = this.getAttribute('index');
                // 干掉所有人，让其余的item这些div隐藏
                for(var i=0; i<items.length;i++){
                    items[i].style.display='none';
                }
                // 留下我自己
                items[index].style.display='block';
            }

        }
    </script>