多按钮内容切换JavaScript问题：实现点击再次隐藏功能

我来帮你搞定这个切换功能！你的现有代码之所以只能显示不能隐藏，核心问题是每次点击都会强制将目标内容设为显示状态，没有判断它当前是否已经可见，所以没法触发隐藏逻辑。另外我还发现一个小bug：你HTML里按钮的类是link，但JS里写的是getElementsByClassName("links")（多了个s），这会导致按钮的active样式无法正确移除，得先修正这个。

修改后的JavaScript代码（仅用原生JS实现切换） #

function openTab(event, tabId) {
  // 获取目标内容元素
  const targetContent = document.getElementById(tabId);
  // 获取所有内容块和按钮
  const allContent = document.getElementsByClassName("content");
  const allLinks = document.getElementsByClassName("link");

  // 判断目标内容当前是否处于显示状态
  const isContentVisible = targetContent.style.display === "block";

  // 先重置所有内容的显示状态和按钮的激活样式
  for (let i = 0; i < allContent.length; i++) {
    allContent[i].style.display = "none";
  }
  for (let i = 0; i < allLinks.length; i++) {
    allLinks[i].className = allLinks[i].className.replace(" active", "");
  }

  // 根据当前状态决定显示或隐藏目标内容
  if (!isContentVisible) {
    targetContent.style.display = "block";
    event.currentTarget.className += " active";
  }
}

关键逻辑说明 #

1. 状态判断：先检查目标内容的display属性是不是block，以此判断它当前是否可见
2. 重置全局状态：不管点击的是哪个按钮，先把所有内容隐藏、所有按钮的激活样式移除
3. 切换逻辑：如果目标内容原本不可见，就显示它并给对应按钮加上激活样式；如果原本可见，就保持隐藏状态（因为已经在重置步骤中把它设为none了）

这样修改后，你点击已经激活的按钮时，对应的内容就会隐藏，按钮的激活样式也会消失；点击未激活的按钮时，就会显示对应内容并激活按钮，完美实现切换效果！

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