本文介绍了Vanilla Java脚本：在列表的每个元素上切换一个类名，以便每次只有一项具有所需的类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个导航栏。
若要开始，仅第一个链接(主页)的类为"Active"。
我希望实现以下目标： 当用户单击不同的链接时，Active类将从存在的位置移除，并归因于用户单击的链接。 以便一次只有一个链接处于活动状态。
const links = document.querySelectorAll('.navbar ul li a');
links.forEach((link) => {
link.addEventListener('click', () => {
link.classList.toggle('active');
});
});.active {
background-color: #fc9d03;
}<div class="navbar">
<ul>
<li><a href="#" class="active">Homepage</a></li>
<li> <a href="#">Blog Entries</a></li>
<li><a href="#">Food Gallery</a></li>
<li> <a href="#">Contact Us</a></li>
</ul>
</div>推荐答案
我稍微编辑了您的代码段。
在事件侦听器功能上，您可以通过过滤掉所有链接中单击的链接来停用所有链接。
然后，您可以从这些链接中删除激活类，并将其添加到单击的链接中。
const links = document.querySelectorAll('.navbar ul li a');
links.forEach((link) => {
link.addEventListener('click', () => {
const notClickedLinks = Array.from(links).filter((notClickedLink) => {
return notClickedLink !== link;
});
notClickedLinks.forEach((notClickedLink) => {
notClickedLink.classList.remove('active');
});
link.classList.add('active');
});
});.active {
background-color: #fc9d03;
}<div class="navbar">
<ul>
<li><a href="#" class="active">Homepage</a></li>
<li><a href="#">Blog Entries</a></li>
<li><a href="#">Food Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>这篇关于Vanilla Java脚本：在列表的每个元素上切换一个类名，以便每次只有一项具有所需的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！