JS点击按钮控制多个元素显隐切换功能代码异常求助

问题原因 #

• 重复赋值onclick事件导致覆盖：onclick是DOM元素的属性，多次赋值会直接覆盖之前的绑定逻辑，你给btn2、btn3分别绑定了4次onclick，最终只会保留最后一次绑定的逻辑，所以btn2点击仅控制sect8，btn3点击仅控制sect12，这是2、3按钮仅能显示一个元素的原因。
• toggleDivs函数逻辑错误：函数else分支会先移除所有sect元素的shown类，再仅给当前传入的单个sect加shown类。btn1点击时连续调用4次toggleDivs，前3次添加的shown类都会被后一次调用的清空操作删除，最终仅能显示sect4，导致功能完全混乱。
• 冗余代码：按钮激活状态的判断分支中，重复执行了两次remove("shown")，属于无效操作。

修复后代码 #

JavaScript部分 #

var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
// 配置按钮和对应控制的区域映射，后续修改只需调整这个配置即可
var btnToSects = {
  btn1: ["sect1", "sect2", "sect3", "sect4"],
  btn2: ["sect5", "sect6", "sect7", "sect8"],
  btn3: ["sect9", "sect10", "sect11", "sect12"]
};
// 所有sect区域的列表
var allSects = Array.from({length:12}, (_,i) => `sect${i+1}`);

// 统一绑定点击事件
[btn1, btn2, btn3].forEach(btn => {
  btn.onclick = function(event) {
    event.preventDefault();
    const currentBtnId = this.id;
    const targetSects = btnToSects[currentBtnId];
    // 判断当前按钮是否已激活
    if(this.classList.contains("btn_active_state")) {
      // 移除当前按钮激活状态，隐藏对应区域
      this.classList.remove("btn_active_state");
      targetSects.forEach(id => {
        document.getElementById(id).classList.remove("shown");
      });
      return;
    }
    // 未激活的情况：先清空所有按钮激活状态，隐藏所有区域
    [btn1, btn2, btn3].forEach(b => b.classList.remove("btn_active_state"));
    allSects.forEach(id => {
      document.getElementById(id).classList.remove("shown", "fade");
    });
    // 激活当前按钮，显示对应所有区域
    this.classList.add("btn_active_state");
    targetSects.forEach(id => {
      document.getElementById(id).classList.add("shown", "fade");
    });
  }
});

// 初始化默认激活btn1
btn1.focus();
btn1.click();

CSS部分（原有逻辑无需修改，仅做保留） #

.elementor-editor-active .hidden{
  display:block;
}
.hidden{
  display:none;
}
.shown{
  display: block !important;
  animation: fade_in_anim 0.5s;
}
.btn_active_state{
  background-color: #FFCC00 !important;
}

@keyframes fade_in_anim {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

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