我对每个图标的活动状态都有问题。应该发生的是;当点击图标时，图标下方会出现一条红线(border-bottom: 5px实心红色)，然后当你点击下一个图标时，之前点击的图标上的红线会消失，而你刚刚点击的图标上的红线会出现，以此类推，但是当我点击其他两个图标时。红线只出现在第一个图标上;我点哪个都无所谓。
function toggleTabs() {
const tabs = document.querySelector('#tabs');
tabs.classList.toggle('active');
}:root {
--primary-color: #e50914;
--dark-color: #141414;
--light-color: #f4f4f4;
}
.content {
position: relative;
height: 230px;
width: 100%;
background: var(--dark-color);
display: flex;
justify-content: space-evenly;
align-items: center;
text-align: center;
font-size: 25px;
color: grey;
border-bottom: 5px solid rgb(70, 65, 65);
}
.tab-1, .tab-2, .tab-3 {
cursor: pointer;
padding: 20px;
padding-right: 30px;
padding-left: 30px;
}
.content > div:hover {
color: var(--light-color)
}
#tabs p {
font-size: 0.8em;
}
#tabs.active {
border-bottom: 5px solid red;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/e81277d7cc.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<div class="content">
<div class="tab-1" id="tabs" onclick="toggleTabs()">
<span class="fas fa-door-open fa-2x"></span>
<p>Cancel at any time</p>
</div>
<div class="tab-2" id="tabs" onclick="toggleTabs()">
<span class="fas fa-tablet-alt fa-2x"></span>
<p>Watch anywhere</p>
</div>
<div class="tab-3" id="tabs" onclick="toggleTabs()">
<span class="fas fa-tags fa-2x"></span>
<p>Pick your price</p>
</div>
</div>不是最好的代码
function toggleTabs(param) {
const tabs = document.querySelectorAll(".tab");
var i;
for (i = 0; i < tabs.length; i++) {
tabs[i].classList.remove("active");
}
tabs[param].classList.add("active");
}:root {
--primary-color: #e50914;
--dark-color: #141414;
--light-color: #f4f4f4;
}
.content {
position: relative;
height: 230px;
width: 100%;
background: var(--dark-color);
display: flex;
justify-content: space-evenly;
align-items: center;
text-align: center;
font-size: 25px;
color: grey;
border-bottom: 5px solid rgb(70, 65, 65);
}
.tab-1, .tab-2, .tab-3 {
cursor: pointer;
padding: 20px;
padding-right: 30px;
padding-left: 30px;
}
.content > div:hover {
color: var(--light-color)
}
#tabs p {
font-size: 0.8em;
}
#tabs.active {
border-bottom: 5px solid red;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/e81277d7cc.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<div class="content">
<div class="tab" id="tabs" onclick="toggleTabs(0)">
<span class="fas fa-door-open fa-2x"></span>
<p>Cancel at any time</p>
</div>
<div class="tab" id="tabs" onclick="toggleTabs(1)">
<span class="fas fa-tablet-alt fa-2x"></span>
<p>Watch anywhere</p>
</div>
<div class="tab" id="tabs" onclick="toggleTabs(2)">
<span class="fas fa-tags fa-2x"></span>
<p>Pick your price</p>
</div>
</div>