如何实现点击按钮切换div内容，重复点击当前按钮清空div？

你的现有代码已经完成了内容切换的基础功能，但缺少对当前激活状态的跟踪，所以无法识别是否重复点击了同一个按钮。下面是修改后的完整方案，同时我还修正了原代码里的一个拼写错误（getElementbyId应该是getElementById，注意大写的B）：

修改后的HTML代码 #

<button onclick="changeNavigation('bl1')">Techniker</button>
<button onclick="changeNavigation('bl2')">Übersetzer</button>
<button onclick="changeNavigation('bl3')">Qualitychecker</button>
<div id="text_content"></div>
<div id="bl1">
  <p>This is text 1</p>
</div>
<div id="bl2">
  <p>This is text 2</p>
</div>
<div id="bl3">
  <p>This is text 3</p>
</div>

修改后的JavaScript代码 #

// 新增变量跟踪当前显示内容的ID
let currentActiveId = '';

function changeNavigation(id) {
  const targetDiv = document.getElementById('text_content');
  const sourceDiv = document.getElementById(id);
  
  // 判断是否点击的是当前激活的按钮
  if (id === currentActiveId) {
    // 清空内容并重置激活状态
    targetDiv.innerHTML = '';
    currentActiveId = '';
  } else {
    // 切换内容并更新激活状态
    targetDiv.innerHTML = sourceDiv.innerHTML;
    currentActiveId = id;
  }
}

功能说明 #

• 首次点击任意按钮：将对应div的内容填充到text_content中，同时记录该按钮对应的ID为当前激活状态
• 再次点击同一个按钮：清空text_content的内容，并重置激活状态
• 点击其他按钮：切换为对应按钮的内容，更新激活状态

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