Tab栏切换布局分析

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

	*{margin: 0;padding: 0;}.tab_list ul{margin-top: 50px;margin-left: 200px;background-color: #e8e8e8;width: 800px;height: 39px;border: 1px solid red;}.tab_list li{list-style: none;float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;}.tab_list .current{background-color: red;color: white;}/* .item-info{padding: 20px 0 0 20px;} */.tab_con{margin-left: 200px;}.item{color: #686868;display: none;}

	<script type="text/javascript">var lis = document.querySelector('.tab_list').querySelectorAll('li');var items = document.querySelectorAll('.item');// 1、进行排他思想创建点击事件，使得每次点击时，被点击的li的属性为‘current’,其余的为空//给获取li的lis添加循环绑定事件(排他思想)，进行点击事件for (var i = 0; i < lis.length; i++) {//2.1、此时给li添加设置索引号 属性名为indexlis[i].setAttribute('index',i);lis[i].onclick = function(){//干掉所有人，其余的li清除 class 这个类for (var i = 0; i < lis.length; i++) {lis[i].className = '';}//留下本身自己this.className = 'current';// 2、下面显示内容模块//2.2、获取index 中的属性值var index = this.getAttribute('index');console.log(index);//2.3、点击lis时，使得items的内容进行显示// items[index].style.display = 'block';//2.4、干掉所有人，只让被选中的item内容进行显示for (var i = 0; i < items.length; i++) {items[i].style.display = 'none';}//留下自己，进行显示items[index].style.display = 'block';}}</script>