效果图:
先写HTML代码:
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">国际新闻</li>
<li>国内新闻</li>
<li>体育新闻</li>
<li>娱乐新闻</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
新闻1+1
</div>
<div class="item">
海峡两岸
</div>
<div class="item">
风云足球
</div>
<div class="item">
娱乐星期天
</div>
</div>
</div>
用CSS浅调一下:
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
ul {
overflow: hidden;
}
.tab {
width: 424px;
margin: 100px auto;
}
.tab_list {
height: 39px;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
border: 1px solid #ccc;
}
.tab_list .current {
background-color: white;
border-bottom: 0;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
.tab_con {
height: 100px;
border: 1px solid #ccc;
border-top: 0;
}
</style>
最后就是JS代码了,比较容易理解,
1.获取我们需要的元素。
2.在循环里创建自定义属性,并绑定到item上。同时使用排他算法清除掉所有item的类,并给点击的item添加current类名。
3.继续使用排他检测,显示索引值相同的li,索引值不同则隐藏。
<script>
var lis = document.querySelector('.tab_list').querySelectorAll('li');
var items = document.querySelectorAll('.item');
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
this.className = 'current';
//以下是显示内容模块
var index = this.getAttribute('index');
console.log(index);
//排他,显示索引值相同的li
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>