使用JS隐藏类似于选项卡表的折叠内容

<div class="tab">
  <button class="tab-button" onclick="toggleTab(1)">选项卡1</button>
  <div class="tab-content" id="tab1">
    这是选项卡1的内容。
  </div>
  <button class="tab-button" onclick="toggleTab(2)">选项卡2</button>
  <div class="tab-content" id="tab2">
    这是选项卡2的内容。
  </div>
  <button class="tab-button" onclick="toggleTab(3)">选项卡3</button>
  <div class="tab-content" id="tab3">
    这是选项卡3的内容。
  </div>
</div>

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

function toggleTab(tabIndex) {
  // 隐藏所有选项卡内容
  var tabContents = document.getElementsByClassName("tab-content");
  for (var i = 0; i < tabContents.length; i++) {
    tabContents[i].classList.remove("active");
  }
  
  // 显示当前选中的选项卡内容
  var selectedTab = document.getElementById("tab" + tabIndex);
  selectedTab.classList.add("active");
}