将特定选项卡的内容显示为其子项

<div class="tab-container">
  <button class="tab-button" onclick="showTab(event, 'tab1')">选项卡1</button>
  <button class="tab-button" onclick="showTab(event, 'tab2')">选项卡2</button>
  <button class="tab-button" onclick="showTab(event, 'tab3')">选项卡3</button>

  <div id="tab1" class="tab-content">
    <h3>选项卡1的内容</h3>
    <p>这是选项卡1的详细信息。</p>
  </div>

  <div id="tab2" class="tab-content">
    <h3>选项卡2的内容</h3>
    <p>这是选项卡2的详细信息。</p>
  </div>

  <div id="tab3" class="tab-content">
    <h3>选项卡3的内容</h3>
    <p>这是选项卡3的详细信息。</p>
  </div>
</div>

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

.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
}

.tab-container {
  width: 400px;
}

.tab-container .tab-content:first-child {
  display: block;
}

function showTab(event, tabId) {
  // 获取所有选项卡按钮和内容
  var tabButtons = document.getElementsByClassName("tab-button");
  var tabContents = document.getElementsByClassName("tab-content");

  // 隐藏所有选项卡内容
  for (var i = 0; i < tabContents.length; i++) {
    tabContents[i].style.display = "none";
  }

  // 移除所有选项卡按钮的活动状态
  for (var i = 0; i < tabButtons.length; i++) {
    tabButtons[i].className = tabButtons[i].className.replace(" active", "");
  }

  // 显示当前选项卡内容
  document.getElementById(tabId).style.display = "block";

  // 添加活动状态到当前选项卡按钮
  event.currentTarget.className += " active";
}