tab栏切换

当鼠标点击上面相应的选项卡(tab)，下面内容也跟随变化。
【案例分析】

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

【HTML代码】

<div class="tab"><div class="tab_list"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价</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">商品评价(5000)模块内容</div><div class="item">手机社区模块内容</div></div></div>

【CSS代码】

 <style>.tab{background-color: gray;height: 39px;width: 800px;margin: auto;}.tab_list li{float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;list-style: none;}.tab_list .current{background-color: red;color: #fff;}.item_info{padding: 20px 0 0 20px;}.item{display: none;}.tab_con{float: left;height: 639px;width: 800px;margin: auto;}</style>

【案例分析1和2点的JavaScript部分代码】

<script>// 1:模块选项卡，点击某一个，当前这一个底色会变成红色，其他不变(排它思想) ，修改类名方式// 获取元素var tab_list = document.querySelector(".tab_list");var lis = tab_list.querySelectorAll("li");//绑定事件for循环for(var i = 0;i< lis.length;i++){lis[i].onclick = function(){//其余的li清除格式，只保留当前这个lifor(var i = 0;i< lis.length;i++){lis[i].className = '';}this.className = 'current';}}
</script>

【JavaScript总代码】

<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清除格式，只保留当前这个lifor(var i = 0;i< lis.length;i++){lis[i].className = '';}this.className = 'current';// 2:下面的显示内容模块var index = this.getAttribute('index');//获取索引号，找到对应的选项卡for(var i = 0;i<items.length;i++){items[i].style.display='none';}items[index].style.display='block';}}</script>