<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tab栏切换案列</title>
</head>
<style>
.tab_list {
background-color: #f7f7f7;
border: 1px solid #eee;
border-bottom: 1px solid #e4393c;
height: 69px;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
list-style: none;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item {
display: none;
padding: 50px;
}
</style>
<body>
<div class = "tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li >规格与包装</li>
<li >质检报告</li>
<li >售后保障</li>
<li >商品评价<s>(5000+)</s></li>
<li >本店好评商品</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;"> 商品介绍模块 </div>
<div class="item" > 规格与包装模块 </div>
<div class="item" > 质检报告模块 </div>
<div class="item" > 售后保障模块 </div>
<div class="item" > 商品评价模块 </div>
<div class="item" > 本店好评商品模块 </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(){ // 鼠标点击事件
for(var i = 0;i < lis.length; i++) {
lis[i].className = '' ; //当前表格行背景颜色改变
}
this.className = 'current' ; //当前表格行背景颜色改变
var index = this.getAttribute('index');
for(var i = 0;i < items.length; i++) {
items[i].style.display = 'none'; //当前zi改变
}
items[index].style.display = 'block';
}
}
</script>
</body>
</html>
07-28
2055
11-29
382