<!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>
.box {
width: 990px;
height: 500px;
}
.h_box {
width: 990px;
height: 50px;
background-color: #eee;
border-bottom: 1px solid #e4393c;
}
.h_box ul {
padding: 0;
}
.h_box ul li {
float: left;
list-style: none;
text-align: center;
line-height: 50px;
margin-right: 20px;
padding-left: 15px;
padding-right: 15px;
}
.bg {
background-color: #e4393c;
color: #ffffff;
}
</style>
</head>
<body>
<div class="box">
<div class="h_box">
<ul>
<li class="bg">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_box">
<div class="item">商品介绍</div>
<div class="item" style="display: none;">规格与包装</div>
<div class="item" style="display: none;">售后保障</div>
<div class="item" style="display: none;">商品评价</div>
<div class="item" style="display: none;">手机社区</div>
</div>
</div>
<script>
var h_box = document.querySelector(".h_box");
var li = h_box.querySelectorAll("li");
var item = document.querySelectorAll(".item");
for (var i=0;i<li.length;i++){
// 自定义一个属性,并赋值;可以利用属性值显示对应的div
li[i].setAttribute('data-index',i);
// 排他思想
li[i].onclick = function(){
for (var i=0;i<li.length;i++){
li[i].className='';
}
this.className = 'bg';
// 获取自定义属性的元素
var index = this.getAttribute('data-index');
for(var i=0;i<item.length;i++){
item[i].style.display = 'none';
}
item[index].style.display = 'block';
}
}
</script>
</body>
</html>