样式
<style>
.box {
display: flex;
}
div.box-item {
width: 200px;
height: 50px;
border-right: 1px solid #eee;
text-align: center;
line-height: 50px;
background-color: blueviolet;
color: white;
}
.box-item.active {
background-color: rgb(230, 230, 13);
color: black;
}
</style>js
<body>
<!-- tab切换 -->
<div class="box">
<div class="box-item active">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
</div>
<script>
let itemList = document.querySelectorAll('.box-item');
for (let i = 0; i < itemList.length; i++) {
itemList[i].onclick = function() {
let active = document.querySelector('.box-item.active');
active.classList.remove('active');
// itemList[i].classList.add('active');
itemList[i].classList.toggle('active');
}
}
</script>
</body>
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
