tap栏切换

css代码部分：

.tab{
                width:1000px;
                margin:200px auto;
            }
            .tab_lis ul li{
                width:190px;
                height:40px;
                float: left;
                list-style:none;
                line-height:40px;
                text-align:center;
                border:1px solid #ccc;
            }
            .current{
                background-color:red;
            }
            .item{
                margin-left:44px;
                display: none;
            }

HTML部分：

<div class="tab">
			<div class="tab_lis">
				<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 div class="item">
					规格与包装模块内容
				</div>
				<div div class="item">
					售后保障模块内容
				</div>
				<div div class="item">
					商品评价模块内容
				</div>
				<div div class="item">
					手机社区模块内容
				</div>
			</div>
		</div>

js内容部分：下面采用了自定义属性及排他思想等

	//获取元素
			var tab_lis=document.querySelector('.tab_lis');
			var lis=tab_lis.querySelectorAll('li');
			//这里必须要all，因为总共有五个
			var item=document.querySelectorAll('.item');
			//以上是获取li所有的元素
			//通过for循环绑定点击事件
			for(var i=0;i<lis.length;i++){
				//开始给5个小li，设置索引号总共有五个，所以后面设置i
				lis[i].setAttribute('index',i);
				lis[i].onclick=function(){
					//设置每一个li都绑定点击事件
				//干掉所有人，其余的li清除  class这个类
				//排他思想
				for(var i=0;i<lis.length;i++){
					lis[i].className='';
					
				}
				//留下自己
				this.className='current';//默认自己
				//2,下面的显示内容部分(获取index属性值)
				var index=this.getAttribute('index');
				// console.log(index);
				//留下自己，让其余的item这些div隐藏
				
				for(var i=0;i<item.length;i++){
					item[i].style.display='none';
				}
				//留下自己，让对应的item显示出来
				item[index].style.display='block';
				}
			}