实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width:1000px;
margin:50px auto;
}
.nav ul{
margin:0;
padding:0;
list-style: none;
}
.nav ul li{
display:inline-block;
margin:10px;
padding: 10px 10px;
font-size: 14px;
}
.current{
background-color: #e4393c;
color: white;
}
.show{
display:block;
}
.hidden{
display:none;
}
</style>
</head>
<body>
<div class="box">
<div class="nav">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价</li>
<li>社区互动</li>
</ul>
</div>
<div class="content">
<p>商品介绍内容</p>
<p class="hidden">规格与包装内容</p>
<p class="hidden">售后保障内容</p>
<p class="hidden">商品评价内容</p>
<p class="hidden">社区互动内容</p>
</div>
</div>
<script>
var lis = document.querySelectorAll('li');
var ps = document.querySelectorAll('p');
for (var i = 0 ;i<lis.length;i++) {
// 每一个li都添加了一个data-index属性
lis[i].setAttribute('data-index',i);
lis[i].onclick = function (ev) {
// 让每一个li都去掉高亮class
for (i=0;i<lis.length;i++) {
lis[i].className = null;
ps[i].className='hidden';
}
// 当前点击的li添加高亮class
this.className = 'current';
var index = this.getAttribute('data-index');
ps[index].className = 'show';
};
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例