链接Active类切换异常：重复点击叠加类，无法切换至其他链接

嘿，我来帮你搞定这个active状态切换的问题！你的核心问题在于没有先清除其他链接的active类，也没处理同一链接点击时的切换逻辑，我给你调整一下代码，完美解决这两个问题：

const Terms = {
  init() {
    // 先获取所有触发元素（比如所有.en-trigger类的链接）
    this.triggers = document.querySelectorAll('.en-trigger');
    this.termsContent = document.querySelector('.terms-content'); // 假设这是要切换类的内容元素
    this.bindEvents();
  },

  bindEvents() {
    // 给每个触发元素绑定点击事件
    this.triggers.forEach(trigger => {
      trigger.addEventListener('click', (e) => {
        // 阻止a标签默认跳转行为（如果是a标签的话）
        e.preventDefault();
        
        const currentTrigger = e.target;
        
        // 第一步：移除所有触发元素的active类，确保只有当前点击的链接可能有active
        this.triggers.forEach(t => t.classList.remove('active'));
        
        // 第二步：判断当前点击的链接是否已经有active类，实现同一链接点击切换
        if (currentTrigger.classList.contains('active')) {
          currentTrigger.classList.remove('active');
          // 如果需要同时隐藏内容，可以在这里移除内容的类
          this.termsContent.classList.remove('active-content');
        } else {
          currentTrigger.classList.add('active');
          // 切换内容区的类（两个类之间切换，比如显示/隐藏或者样式切换）
          this.termsContent.classList.toggle('active-content');
          // 如果是固定切换两个类，比如从classA换成classB，也可以这么写：
          // this.termsContent.classList.toggle('classA');
          // this.termsContent.classList.toggle('classB');
        }
      });
    });
  }
};

// 别忘了初始化
Terms.init();

关键逻辑解释： #

• 获取所有触发元素：用querySelectorAll拿到所有需要切换的链接，这样才能遍历移除其他链接的active类，避免多个链接同时高亮。
• 阻止默认行为：e.preventDefault()防止a标签点击后跳转页面，影响交互效果。
• 全局清除active：每次点击先把所有链接的active类去掉，再处理当前链接的状态，确保只有一个链接处于激活状态。
• 同一链接点击切换：通过contains('active')判断当前链接是否已经激活，已经激活就移除，没激活就添加，实现点击切换。
• 内容类切换：用classList.toggle()轻松实现两个类的切换，如果是固定的两个类（比如show和hide），可以连续调用两次toggle来完成互斥切换。

这样修改后，不管是点击同一链接切换active状态，还是点击其他链接转移active状态，都能完美实现啦！

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