如何在javascript上切换带有navbar链接的活动类
如何在javascript上切换带有navbar链接的活动类
提问于 2021-08-06 13:16:48
当单击时，我尝试将" li -active“类切换到我的每个导航条链接li。此时，在第一次单击之后，当前的li-active类将被删除，并将该类传送到新单击的li。太棒了。然而，当单击不同的li时，前面的li并没有删除该类，但是新的li得到了类。我可能忽略了一步。提前谢谢你！
<li data-id="0" id="mercury" class="navbar__links--li">
<div class="inner-div">
<div class="mercury-oval"></div>
MERCURY
</div>
<svg
class="svg"
xmlns="http://www.w3.org/2000/svg"
width="6"
height="8"
>
<path fill="none" stroke="#FFF" opacity=".4" d="M1 0l4 4-4 4" />
</svg>
</li>
<li data-id="1" id="venus" class="navbar__links--li">
<div class="inner-div">
<div class="venus-oval"></div>
VENUS
</div>
<svg
class="svg"
xmlns="http://www.w3.org/2000/svg"
width="6"
height="8"
>
<path fill="none" stroke="#FFF" opacity=".4" d="M1 0l4 4-4 4" />
</svg>
</li>
<li data-id="2" id="earth" class="navbar__links--li li-active">
<div class="inner-div">
<div class="earth-oval"></div>
EARTH
</div>
<svg
class="svg"
xmlns="http://www.w3.org/2000/svg"
width="6"
height="8"
>
<path fill="none" stroke="#FFF" opacity=".4" d="M1 0l4 4-4 4" />
</svg>
</li>
<li data-id="3" id="mars" class="navbar__links--li">
<div class="inner-div">
<div class="mars-oval"></div>
MARS
</div>
<svg
class="svg"
xmlns="http://www.w3.org/2000/svg"
width="6"
height="8"
>
<path fill="none" stroke="#FFF" opacity=".4" d="M1 0l4 4-4 4" />
</svg>
</li>
<li data-id="4" id="jupiter" class="navbar__links--li">
<div class="inner-div">
<div class="jupiter-oval"></div>
JUPITER
</div>
<svg
class="svg"
xmlns="http://www.w3.org/2000/svg"
width="6"
height="8"
>
<path fill="none" stroke="#FFF" opacity=".4" d="M1 0l4 4-4 4" />
</svg>
</li>
<li data-id="5" id="saturn" class="navbar__links--li">
<div class="inner-div">
<div class="saturn-oval"></div>
SATURN
</div>
<svg
class="svg"
xmlns="http://www.w3.org/2000/svg"
width="6"
height="8"
>
<path fill="none" stroke="#FFF" opacity=".4" d="M1 0l4 4-4 4" />
</svg>
</li>
<li data-id="6" id="uranus" class="navbar__links--li">
<div class="inner-div">
<div class="uranus-oval"></div>
URANUS
</div>
<svg
class="svg"
xmlns="http://www.w3.org/2000/svg"
width="6"
height="8"
>
<path fill="none" stroke="#FFF" opacity=".4" d="M1 0l4 4-4 4" />
</svg>
</li>
<li data-id="7" id="neptune" class="navbar__links--li">
<div class="inner-div">
<div class="neptune-oval"></div>
NEPTUNE
</div>
<svg
class="svg"
xmlns="http://www.w3.org/2000/svg"
width="6"
height="8"
>
<path fill="none" stroke="#FFF" opacity=".4" d="M1 0l4 4-4 4" />
</svg>
</li>
</ul>.li-active {
@include desktop {
border-top: 1px solid red;
}
}menuBtn.forEach((li) => {
li.addEventListener("click", (e) => {
menuBtn.forEach((el) => el.classList.remove("li-active"));
e.target.classList.add("li-active");
});
});
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-08-06 14:24:06
这是因为您要将类添加到单击的目标中，这可能是任何内部元素。
将其替换为单击元素本身(li.classlist.add)：
let menuBtn = document.querySelectorAll('.navbar__links--li')
menuBtn.forEach((li) => {
li.addEventListener("click", (e) => {
menuBtn.forEach((el) => el.classList.remove("li-active"));
li.classList.add("li-active");
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68682234
复制相关文章
相似问题
腾讯云开发者
