如何只指定出现文本的id，而不指定隐藏文本的id？

Question

当您点击某个按钮时，会显示特定的文本，而当您点击另一个按钮时，文本会更改为另一种文本。问题是我需要指示需要隐藏的文本的所有可能的标识符。如何只指定显示文本的id，而不指定隐藏文本的id？ 我英文不太好，所以我用了谷歌翻译。

 function hideh1(Id){
   document.getElementById(Id).style.display = "none";
 }

 function showh1(Id){
   document.getElementById(Id).style.display = "block";
 }

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

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

Answer 1

您可以隐藏所有

h1

元素，或者，您可以隐藏 ID 以

Text

开头的所有元素，或者，您可以为所有元素指定一个类名称，然后隐藏具有该类名称的所有元素。

这是我提到的最后一种方法的样子：

function showh1(Id) {
  for (let element of document.getElementsByClassName('elm')) {
    element.style.display = 'none';
  }
  document.getElementById(Id).style.display = "block";
}

<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>