如何使用UI代码从链接创建UI-tab而不是addtab按钮

<a href="#tab1">Tab 1</a>
<a href="#tab2">Tab 2</a>
<a href="#tab3">Tab 3</a>

document.addEventListener('DOMContentLoaded', function() {
  var links = document.querySelectorAll('a[href^="#"]');
  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function(e) {
      e.preventDefault();
      var target = document.querySelector(this.getAttribute('href'));
      if (target) {
        // 显示对应的标签页
        target.style.display = 'block';
        // 隐藏其他标签页
        var siblings = target.parentNode.children;
        for (var j = 0; j < siblings.length; j++) {
          if (siblings[j] !== target) {
            siblings[j].style.display = 'none';
          }
        }
      }
    });
  }
});

.tab {
  display: none;
}

<div id="tab1" class="tab">
  <!-- Tab 1 的内容 -->
</div>
<div id="tab2" class="tab">
  <!-- Tab 2 的内容 -->
</div>
<div id="tab3" class="tab">
  <!-- Tab 3 的内容 -->
</div>