嘿，我瞅了你的代码，确实离目标只差一步啦！问题主要出在几个小细节上，咱们在现有代码基础上微调就能实现点击已激活标签页时隐藏内容的功能，同时不会把按钮也藏起来。

先说说原代码里的问题：

• 最后一行click.currentTarget.style.display = "none"会直接把点击的按钮隐藏，这可不是你想要的效果
• document.getElementById(openTab).style.display = "active"是错误写法，display属性没有active这个值，应该用block来显示内容
• 缺少判断当前标签页是否已经处于激活状态的逻辑，所以没法触发“关闭”行为

下面是修改后的代码，基本保留了你原来的逻辑，只加了判断和修正了错误：

修改后的JavaScript代码 #

function openTab(click, openTab) { 
  var i; 
  var content; 
  var links = document.getElementsByClassName("link"); 
  var targetContent = document.getElementById(openTab);
  var isActive = click.currentTarget.classList.contains("active");

  // 如果当前标签已经激活，就隐藏内容并移除active类
  if (isActive) {
    targetContent.style.display = "none";
    click.currentTarget.classList.remove("active");
    return;
  }

  // 否则执行原来的打开标签逻辑
  content = document.getElementsByClassName("content"); 
  for (i = 0; i < content.length; i++) { 
    content[i].style.display = "none"; 
  } 

  for (i = 0; i < links.length; i++) { 
    links[i].className = links[i].className.replace("active", ""); 
  } 

  targetContent.style.display = "block"; 
  click.currentTarget.className += " active"; 
}

对应的HTML代码（无需改动，保持原样即可） #

<div class="tabs"> 
  <button class="link" onclick="openTab(event, 'About')">About</button> 
  <button class="link" onclick="openTab(event, 'Hire')">Why You Should Hire Me</button> 
  <button class="link" onclick="openTab(event, 'Contact')">Contact</button> 
</div> 
<div id="About" class="content"> 
  <!-- About内容 -->
</div> 
<div id="Hire" class="content"> 
  <!-- Hire内容 -->
</div> 
<div id="Contact" class="content"> 
  <!-- Contact内容 -->
</div>

关键修改点说明： #

1. 增加激活状态判断：用click.currentTarget.classList.contains("active")检查当前点击的按钮是否已经是激活状态，如果是，就直接隐藏对应内容并移除active类，然后结束函数
2. 移除错误的按钮隐藏代码：删掉了click.currentTarget.style.display = "none"，这样按钮就不会被隐藏了
3. 修正display属性值：把错误的document.getElementById(openTab).style.display = "active"改成了正确的targetContent.style.display = "block"，并且提前缓存了目标内容元素，让代码更高效
4. 优化active类的添加：在添加active类时加了个空格（className += " active"），避免出现类似linkactive这种错误的类名

这样修改后，你就能实现：点击未激活的标签时显示对应内容并激活按钮，点击已激活的标签时隐藏内容并取消按钮的激活状态，完全符合你的需求～

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