【JavaScript练习】tab栏切换效果
运行结果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tab {
margin: 100px auto;
width: 700px;
height: 300px;
border: 1px solid #bbb;
}
.tab-list {
display: inline-block;
box-sizing: border-box;
border: 1px solid #999;
background-color: #ddd;
width: 100%;
}
.tab-list li {
float: left;
padding: 8px 20px;
font-size: 16px;
}
.tab-list li:hover {
cursor: pointer;
}
.item {
display: none;
}
.current {
background-color: rgb(228, 27, 27);
color: #fff;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab-list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(500)</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab-con">
<div class="item show">
1111111111111
</div>
<div class="item">
2222222222222
</div>
<div class="item">
33333333333
</div>
<div class="item">
44444444444444
</div>
<div class="item">
5555555555555
</div>
</div>
</div>
<script>
var tab_list = document.querySelector('.tab-list');
var lis = 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() {
// 1.上面选项点击变化
for (var j = 0; j < lis.length; j++) {
lis[j].className = '';
}
this.className = 'current';
// 2.下面选项相应变化
var index = this.getAttribute('index');
for (var k = 0; k < items.length; k++) {
items[k].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>
</body>
</html>