<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;
}
body {
background-color: #eee;
}
ul {
list-style-type: none;
}
.box {
position: relative;
width: 600px;
background-color: #fff;
margin: 50px 0 0 50px;
}
.box ul {
height: 34px;
line-height: 34px;
border-bottom: 1px solid #e4393c;
background-color: #f7f7f7;
}
.box li {
float: left;
/* margin: 0 15px; */
padding: 0 15px;
font-size: 14px;
color: #333;
cursor: pointer;
}
.box li:hover {
color: #e4393c;
}
.content {
display: none;
width: 100%;
height: 200px;
border: 1px solid black;
background-color: #fff;
}
.active {
background-color: #e4393c;
color: #fff !important;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li index="info">演员的诞生</li>
<li index="specs">旅途的花样</li>
<li index="aftermarket">偶像练习生</li>
<li index="comment">热门影评</li>
</ul>
<div style="display: block;" id="info" class="content">演艺圈的故事</div>
<div id="specs" class="content">世界的风景</div>
<div id="aftermarket" class="content">热血少年</div>
<div id="comment" class="content">豆瓣最新评价</div>
</div>
<script>
var lis = document.querySelectorAll('li')
var cs = document.querySelectorAll('.content')
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
// 先设置所有的li标签的classname为空
reset()
// 设置当前单击的li标签为 active
this.className = 'active'
// 先设置所有content都隐藏
resetContent()
// 设置当前单击的li标签对应的content显示
var index=this.getAttribute('index')
document.querySelector(`#${index}`).style.display='block'
/*var txt=this.innerHTML
if(txt=='商品介绍'){
document.querySelector('#info').style.display='block'
}else if(txt=='规格与包装'){
document.querySelector('#specs').style.display='block'
}else if(txt=='售后保障'){
document.querySelector('#aftermarket').style.display='block'
}else if(txt=='商品评价(200+)'){
document.querySelector('#comment').style.display='block'
}*/
}
}
// 重置li标签的样式
function reset() {
for (var i = 0; i < lis.length; i++) {
lis[i].className = ''
}
}
// 重置所有content为隐藏
function resetContent() {
for (var i = 0; i < cs.length; i++){
cs[i].style.display='none'
}
}
</script>
</body>
</html>
