如何用JavaScript类切换函数实现按钮CSS样式的点击切换与还原？

嘿，我完全懂你的困扰！CSS的:active选择器确实只能在按住按钮的瞬间生效，松开鼠标就会回到默认样式，根本没法实现“点击切换、再点击还原”的持久状态，所以用JavaScript来切换CSS类是最靠谱的方案～

你之前的代码只修改第一个元素的样式，大概率是因为你用了document.querySelector()或者getElementById()这类只会返回单个元素的方法。要让所有按钮都能独立切换样式，得先获取所有目标按钮，再给每个按钮单独绑定点击事件才行。

我给你写个完整的可运行示例，你可以直接参考：

1. 先写基础的CSS样式 #

/* 默认按钮样式 */
.toggle-btn {
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

/* 切换后的激活样式 */
.toggle-btn.active {
  background-color: #2196F3;
  color: #fff;
  border-color: #1976D2;
}

2. 编写HTML结构 #

<button class="toggle-btn">按钮1</button>
<button class="toggle-btn">按钮2</button>
<button class="toggle-btn">按钮3</button>

3. 关键的JavaScript代码 #

// 获取所有带toggle-btn类的按钮
const buttons = document.querySelectorAll('.toggle-btn');

// 遍历每个按钮，绑定点击事件
buttons.forEach(button => {
  button.addEventListener('click', function() {
    // 切换当前按钮的active类
    this.classList.toggle('active');
  });
});

代码解释： #

• document.querySelectorAll('.toggle-btn')：会获取页面上所有带有toggle-btn类的按钮，而不是只拿第一个。
• forEach循环：给每个按钮单独添加点击事件监听，确保每个按钮都能独立响应。
• this.classList.toggle('active')：this指代当前被点击的按钮，toggle方法会自动判断：如果按钮有active类就移除，没有就添加，完美实现“点击切换/还原”的效果。

这样修改后，每个按钮点击都会独立切换样式，不会再只影响第一个元素啦～

内容的提问来源于stack exchange，提问作者user2756101