时间戳

首页 > 解决方案 > Vanilla Javascript：在列表的每个元素上切换一个类名，以便每次只有项目具有所需的类

javascript - Vanilla Javascript：在列表的每个元素上切换一个类名，以便每次只有项目具有所需的类

问题描述

我有一个导航栏。
首先，只有第一个链接（主页）具有“活动”类。

我想实现以下目标：

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

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>

标签： javascripthtmlcsstoggle

解决方案

我稍微编辑了你的片段。

在事件侦听器功能上，您可以通过过滤掉所有链接中点击的链接来停用所有链接。

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

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>

推荐阅读