Angular中如何动态添加移除class类名实现按钮激活态切换

你现有HTML结构已经满足初始状态要求（btn1默认携带desActive类），只需要添加少量JS逻辑即可实现点击切换效果，推荐用事件委托的写法，性能更好且后续扩展按钮也不用修改逻辑。

核心实现代码 #

把下面的JS代码放在页面</body>标签前，或者放在DOM加载完成的回调里即可生效：

// 选中按钮组容器
const descBtnGroup = document.querySelector('.btn-group.description');

descBtnGroup.addEventListener('click', (e) => {
  // 兼容按钮内存在图标、子标签的场景，精准定位到点击的按钮
  const activeBtn = e.target.closest('button');
  // 过滤掉按钮组外、非按钮元素的点击
  if (!activeBtn || !descBtnGroup.contains(activeBtn)) return;

  // 移除组内所有按钮的激活类
  descBtnGroup.querySelectorAll('button').forEach(btn => {
    btn.classList.remove('desActive');
  });
  // 给当前点击按钮添加激活类
  activeBtn.classList.add('desActive');
});

逻辑说明 #

• 不需要额外写初始化逻辑，你现有HTML里btn1默认带的desActive类会在页面加载时直接生效
• 用classListAPI操作类名，不会误删按钮上原有的desc2/desc3等其他类名
• 事件委托绑定在父容器上，比逐个给按钮绑定事件性能更好，后续在这个按钮组里新增tab按钮，不需要修改JS代码就能自动支持切换效果

内容的提问来源于stack exchange，提问作者omer f. bn