如何删除（切换）已选择的“活动”类列表

Question

我正在努力从已选择的链接中删除“活动”类。

查看JavaScript中的第20行。 classLink.toggle不应该在clickedElement上添加/删除“活动”吗？我什至尝试过几种方法，例如

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

但是在这个特定的类上似乎没有一个起作用（我添加的任何其他类都可以正常工作）。我想念什么？

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

Answer 1

只需回答实际问题，为什么toggle不会在您的小提琴中解开.active。 https://jsfiddle.net/Evenclan/09sn2kd3/15/

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

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

这将从所有链接元素中删除.active。这意味着所有这些人都没有类别了，或者至少没有类别.active。

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

clickedElement.classList.toggle('active');

因此该类被重新添加（不添加什么，删除什么）。

toggle实际上工作正常，只是您的逻辑无效。为了获得所需的结果，您必须从删除类中排除当前单击的元素。

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

clickedElement.classList.toggle('active');

https://jsfiddle.net/8jrwn3sx/

Answer 2

classList包含一个切换方法。

this.classList.toggle('active');

How to toggle class using pure javascript in html

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

Answer 3

classList包含一个切换方法。

this.classList.toggle('active');

How to toggle class using pure javascript in html

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