单击显示公式中的下一选项卡(div)

<div class="tab">
  <button class="tab-button" onclick="showTab(1)">选项卡1</button>
  <button class="tab-button" onclick="showTab(2)">选项卡2</button>
  <button class="tab-button" onclick="showTab(3)">选项卡3</button>
</div>

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

.tab {
  display: flex;
}

.tab-button {
  padding: 10px;
  background-color: #ccc;
  border: none;
  cursor: pointer;
}

.tab-content {
  display: none;
  padding: 10px;
  background-color: #f9f9f9;
}

function showTab(tabIndex) {
  // 隐藏所有选项卡内容
  var tabContents = document.getElementsByClassName("tab-content");
  for (var i = 0; i < tabContents.length; i++) {
    tabContents[i].style.display = "none";
  }
  
  // 显示选中的选项卡内容
  var selectedTabContent = document.getElementById("tab-content-" + tabIndex);
  selectedTabContent.style.display = "block";
}