如何删除（切换）已选择的 'active' 类列表

Question

我正在努力从已选择的 link 中删除 'active' class。

查看 JavaScript 中的第 20 行。 classLink.toggle 不应该在 clickedElement 上添加/删除 "active" 吗？我什至尝试了一些方法，比如

 if (clickedElement.classList.contains('active')) {
  clickedElement.classList.remove('active');
} else {
  clickedElement.classList.add('active');
}

但 none 似乎适用于这个特定的 class（适用于我添加的任何其他 class）。我错过了什么？

https://jsfiddle.net/Evenclan/09sn2kd3/15/

Answer 1

classList 包含切换方法。

this.classList.toggle('active');

How to toggle class using pure javascript in html

编辑： 您包含的 JsFiddle 正在运行。我打开控制台并单击不同的链接，它们正确地切换为活动状态。

Answer 2

只是为了回答实际问题，为什么 toggle 没有取消 .active 在你的 fiddle 中。 https://jsfiddle.net/Evenclan/09sn2kd3/15/

在切换之前，您首先要做的是：

for (let activeLink of activeLinks) {
  activeLink.classList.remove('active');
}

这将从所有 link 元素中删除 .active。这意味着所有这些都没有 class 或者至少没有 class .active.

在下一行中，您 toggle 刚刚删除的 class .active：

clickedElement.classList.toggle('active');

因此 class 被添加回来（没有的被添加，有的被删除）。

toggle 实际上工作正常，只是你的逻辑不对。要获得所需的结果，您必须从删除 class.

中排除当前单击的元素

for (let activeLink of activeLinks) {
  if(clickedElement !== activeLink) activeLink.classList.remove('active');
}

clickedElement.classList.toggle('active');

https://jsfiddle.net/8jrwn3sx/

如何删除（切换）已选择的 'active' 类列表

how to remove(toggle) 'active' classlist that is already selected

javascript

this

toggle