Javascript :如何显示默认选项卡内容但隐藏其他选项卡内容

<div id="tab1" class="tab-content">选项卡1内容</div>
<div id="tab2" class="tab-content">选项卡2内容</div>
<div id="tab3" class="tab-content">选项卡3内容</div>

.tab-content {
  display: none;
}

// 获取默认选项卡的按钮
var defaultTabButton = document.querySelector(".tab-button:first-child");

// 获取默认选项卡的容器元素
var defaultTabContent = document.getElementById(defaultTabButton.getAttribute("data-target"));

// 显示默认选项卡内容
defaultTabContent.style.display = "block";

// 获取所有选项卡按钮
var tabButtons = document.querySelectorAll(".tab-button");

// 遍历每个选项卡按钮
tabButtons.forEach(function(button) {
  button.addEventListener("click", function() {
    // 获取当前按钮对应的选项卡容器元素
    var targetContent = document.getElementById(this.getAttribute("data-target"));

    // 隐藏所有选项卡内容
    document.querySelectorAll(".tab-content").forEach(function(content) {
      content.style.display = "none";
    });

    // 显示当前选项卡内容
    targetContent.style.display = "block";
  });
});