实现效果图

整个页面分为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>