通过为所有待切换的文本元素统一添加 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>✅ 优势说明：
- ✅ 零维护成本：新增文本只需添加
<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 动态显示场景中的经典实践模式。
