JS问题：如何仅为当前点击按钮设置active类并移除其他按钮的该类

你的问题出在初始化时只移除了一次所有按钮的active类，但点击新按钮时没有再次执行移除其他按钮active类的操作。原代码里的btn[i].classList.remove('active')是在页面加载时遍历按钮的阶段执行的，只跑一次；之后点击按钮的回调里只给自己加active，完全没处理其他按钮的状态，所以旧按钮的active类自然不会被清除。

下面是两种修正方案，适配不同的代码风格：

方式一：贴合你原有代码的原生JS写法 #

var btn = document.getElementsByClassName('provas-card-btn')
for(var i = 0; i < btn.length; i++){
 btn[i].addEventListener('click',function(){
   // 点击时先清空所有按钮的active类
   for(var j = 0; j < btn.length; j++){
     btn[j].classList.remove('active');
   }
   // 再给当前点击的按钮添加active类
   this.classList.add('active');
 });
}

核心改动是把「移除所有active类」的逻辑移到了点击事件的回调里——每次点击按钮时，先统一清除所有按钮的激活状态，再给当前点击的按钮加上active，这样就能保证始终只有一个按钮处于激活状态。

方式二：更简洁的ES6写法（推荐） #

如果你的项目环境支持ES6语法，用querySelectorAll配合forEach会让代码更清爽，还能避免var变量的作用域问题：

const buttons = document.querySelectorAll('.provas-card-btn');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    // 批量移除所有按钮的active类
    buttons.forEach(btn => btn.classList.remove('active'));
    // 给当前点击的按钮添加active类
    button.classList.add('active');
  });
});

额外小提示：适配动态生成按钮的场景 #

如果页面后续会通过JS动态添加新的provas-card-btn按钮，上面的绑定方式会失效，这时候可以用事件委托把点击事件绑定到按钮的父元素上，新生成的按钮也能自动生效：

// 替换成你实际的按钮父元素选择器，比如.provas-btn-group
const btnContainer = document.querySelector('.provas-btn-group');

btnContainer.addEventListener('click', (e) => {
  if(e.target.classList.contains('provas-card-btn')){
    // 清空父元素下所有按钮的active类
    btnContainer.querySelectorAll('.provas-card-btn').forEach(btn => btn.classList.remove('active'));
    // 给点击的按钮添加active类
    e.target.classList.add('active');
  }
});

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