通过为所有待切换的文本元素统一添加 CSS 类（如 elm），在 showh1() 函数中先批量隐藏该类所有元素，再单独显示目标 ID 元素，即可避免手动列举每个隐藏 ID，实现简洁、可扩展的显隐控制。

通过为所有待切换的文本元素统一添加 css 类（如 `elm`），在 `showh1()` 函数中先批量隐藏该类所有元素，再单独显示目标 id 元素，即可避免手动列举每个隐藏 id，实现简洁、可扩展的显隐控制。

在多文本单显（即一次只显示一个、其余全部隐藏）的交互场景中，硬编码每个需隐藏元素的 ID（如 hideh1('Text00'); hideh1('Text11'); ...）不仅冗余，还严重降低可维护性——每新增一个文本项，所有按钮的 onclick 属性都需同步修改，极易出错。

更优解是利用共同特征批量操作。推荐采用 CSS 类统一标识法：为所有参与切换的 <h1></h1> 元素添加相同 class（例如 class="elm"），然后在 JavaScript 中通过 getElementsByClassName() 获取全部目标元素，一次性设为 display: none，最后仅将传入 ID 对应的元素设为 display: block。

以下是优化后的完整实现：

<script>
function showh1(Id) {
  // 批量隐藏所有带 'elm' 类的元素
  const allElements = document.getElementsByClassName('elm');
  for (let el of allElements) {
    el.style.display = 'none';
  }
  // 单独显示目标元素
  document.getElementById(Id).style.display = 'block';
}
</script><button onclick="showh1('Text11')">Text1</button>
<button onclick="showh1('Text22')">Text2</button>
<button onclick="showh1('Text33')">Text3</button>
<button onclick="showh1('Text00')">Text00</button>

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

✅ 优势说明：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• ✅ 零维护成本：新增文本只需添加 <h1 class="elm" id="Text44">Text44</h1>，无需修改任何 JS 或按钮逻辑；
• ✅ 语义清晰：class="elm" 明确表达了“属于本组切换元素”的意图；
• ✅ 性能可靠：getElementsByClassName 兼容所有现代浏览器，且返回实时集合，效率良好。

⚠️ 注意事项：

• 确保初始状态一致（建议统一用 style="display:none" 隐藏非默认项，或在脚本加载后调用 showh1('Text00') 初始化）；
• 若页面中存在其他不参与切换但也带有 elm 类的元素，应改用更特化的类名（如 class="switchable-text"）以避免误操作；
• 如需支持 CSS 过渡动画，可将 display 替换为 opacity + visibility 组合，并配合 transition 属性。

此方法将控制逻辑从“点对点列举”升级为“组内广播+精准激活”，是前端 DOM 动态显示场景中的经典实践模式。