<head>
<style>
ul {
width: 500px;
height: 50px;
list-style: none;
display: flex;
}
ul>li {
padding: 0 20px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
.box {
width: 500px;
margin: 0 auto;
}
.point {
background-color: #ffcc00;
color: aliceblue;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="box">
<div class="head">
<ul>
<li class="point">第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</div>
<div class="content">
<div class="item" style="display: block;">
这是第一个的内容
</div>
<div class="item">
这是第二个的内容
</div>
<div class="item">
这是第三个的内容
</div>
<div class="item">
这是第四个的内容
</div>
<div class="item">
这是第五个的内容
</div>
</div>
</div>
<script>
var tab_li = document.querySelector('.head');
var lis = tab_li.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 = 'point';
var index = this.getAttribute('index')
console.log(index);
console.log(items);
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none'
}
items[index].style.display = 'block';
}
}
</script>
</body>
07-28
2023
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-21
356
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-21
664
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)