1.所有元素全部清除样式
2.给当前元素设置样式
3.注意顺序不能颠倒,首先要把除自己外的其他人干掉,在设置自己
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
<style>
body{
background-Color:#ff9711;
}
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.tab {
width: 650px;
margin: 100px auto;
}
.tab .tab_list {
width: 650px;
height: 70px;
line-height: 35px;
border: 1px solid #999;
background-color: #ccc;
}
.tab_list li {
float: left;
height: 33px;
padding: 0 20px;
cursor: pointer;
text-align: center;
}
.current {
background-color: #c81523;
color: #fff;
}
.tab_con {
clear: both;
}
.item {
display: none;
}
</style>
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(5000)</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">商品评价(5000)模块内容</div>
<div class="item">手机社区模块内容</div>
</div>
</div>
<script>
var lis = document.querySelector('ul').querySelectorAll('li');
console.log(lis)
var items = document.querySelectorAll('.item');
for (i = 0; i < lis.length; i++) {
// 为5个li设置自定义属性,用于当索引号
lis[i].index = i
lis[i].onclick = function() {
// 1.排他思想
for (i = 0; i < lis.length; i++) {
lis[i].className = '';
}
this.className = 'current';
// 2.获取一一对应的自定义索引号,当鼠标点击了li后,获取该li的索引号index并赋值给变量index
// 这里只能用this,选中触发的事件,lis[i]则是循环最后的事件
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[this.index].style.display = 'block';
}
}
</script>
</body>
</html>