使用超链接后如何显示相同id的tabcontent？

<a href="#tab1" id="link1">Tab 1</a>
<a href="#tab2" id="link2">Tab 2</a>

<div id="tab1" class="tabcontent">
  <h3>Tab 1 Content</h3>
  <p>This is the content for tab 1.</p>
</div>

<div id="tab2" class="tabcontent">
  <h3>Tab 2 Content</h3>
  <p>This is the content for tab 2.</p>
</div>

.tabcontent {
  display: none;
}

document.getElementById("link1").addEventListener("click", function(event) {
  event.preventDefault(); // 阻止超链接的默认行为
  showTabContent("tab1");
});

document.getElementById("link2").addEventListener("click", function(event) {
  event.preventDefault(); // 阻止超链接的默认行为
  showTabContent("tab2");
});

function showTabContent(tabId) {
  // 隐藏所有的tabcontent元素
  var tabContents = document.getElementsByClassName("tabcontent");
  for (var i = 0; i < tabContents.length; i++) {
    tabContents[i].style.display = "none";
  }
  
  // 显示指定id的tabcontent元素
  document.getElementById(tabId).style.display = "block";
}