Vanilla Javascript:在列表中的每个元素上切换类名，这样每次只有一个项目具有所需的类

Question

我有一个导航栏
仅从第一个链接开始(主页(就有一个"活动"类。

我想实现以下目标：

当用户单击不同的链接时，活动类将从存在的任何位置删除，并归属于用户单击的链接。这样一次只有一个链接处于活动状态。

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>

Answer 1

我对您的代码片段进行了一些编辑。

在事件侦听器功能中，您可以通过从所有链接中筛选出单击的链接来停用所有链接。

然后，您可以从这些链接中删除activate类，并将其添加到单击的链接中。

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>

Answer 2

我的答案由@Chris G在评论中提供：

与其只是切换它，不如将其从所有其他文件中删除，然后将其添加回当前文件：jsfiddle.net/rcfx75m9–Chris G 18小时前