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';
}
}