如何仅指定待显示文本的ID，无需逐一指定待隐藏文本的ID？

你可以通过给所有需要切换显示的文本元素统一标记（比如添加类名），点击按钮时先批量隐藏所有同类元素，再单独显示目标元素，这样就不用挨个指定要隐藏的ID了。

修改后的代码 #

JavaScript 部分

function toggleText(showId) {
  // 选中所有需要切换的文本元素（通过统一类名标记）
  const allTexts = document.querySelectorAll('.text-content');
  // 批量隐藏所有文本
  allTexts.forEach(text => {
    text.style.display = 'none';
  });
  // 显示指定ID的文本
  document.getElementById(showId).style.display = 'block';
}

HTML 部分

<button onclick="toggleText('Text00')">Text00</button>
<button onclick="toggleText('Text11')">Text1</button>
<button onclick="toggleText('Text22')">Text2</button>
<button onclick="toggleText('Text33')">Text3</button>

<h1 id="Text00" class="text-content">Text00</h1>
<h1 id="Text11" class="text-content" style="display:none">Text11</h1>
<h1 id="Text22" class="text-content" style="display:none">Text22</h1>
<h1 id="Text33" class="text-content" style="display:none">Text33</h1>

核心逻辑说明 #

1. 给所有需要切换的<h1>元素添加统一类名text-content，实现批量选中的基础；
2. 仅保留一个toggleText函数，只需要传入要显示的文本ID：
   • 先通过类名选中所有文本元素，遍历执行隐藏操作；
   • 最后单独显示目标ID对应的元素；
3. 按钮点击事件只需调用这个函数并传入对应ID，无需再逐一写隐藏其他元素的代码。

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