更改按下时的活动类 - JavaScript

在 JavaScript 中，可以使用 classList 属性来处理 HTML 元素的类。

通过 classList 属性，我们可以添加、删除、切换、检查和替换 HTML 元素的类。

其中，切换类最常用到的场景就是更改按下时的活动类，以便在用户单击按钮或链接时改变其样式。

使用 classList 切换活动类

classList 有两个主要方法：

• add()：添加一个类名。
• remove()：删除一个类名。

可以在单个元素上使用这些方法，如下所示：

const element = document.getElementById("myElement");
element.classList.add("active");
element.classList.remove("active");

但是，更改按下时的活动类通常需要在多个元素上进行。

例如，我们有一个页面上的三个按钮：

<button id="button1">按钮1</button>
<button id="button2">按钮2</button>
<button id="button3">按钮3</button>

我们可以使用 forEach() 方法迭代这些元素，并在每个元素上添加和删除活动类。

const buttons = document.querySelectorAll("button");

buttons.forEach(button => {
  button.addEventListener("click", () => {
    buttons.forEach(btn => btn.classList.remove("active"));
    button.classList.add("active");
  });
});

在上面的代码中，我们首先使用 querySelectorAll() 方法获取所有的按钮元素，并使用 forEach() 方法迭代它们。然后，我们给每个按钮添加一个单击事件监听器。在每个按钮单击时，我们将在所有按钮上删除活动类，然后在单击的按钮上添加活动类。

现在，我们已经成功地更改了按下时的活动类，以便在用户单击按钮时改变其样式。