js设置默认选项卡

<div id="tabs">
  <button class="tab-button" data-tab="tab1">Tab 1</button>
  <button class="tab-button" data-tab="tab2">Tab 2</button>
  <button class="tab-button" data-tab="tab3">Tab 3</button>
</div>

<div id="tab-content">
  <div id="tab1" class="tab-pane">Content for Tab 1</div>
  <div id="tab2" class="tab-pane">Content for Tab 2</div>
  <div id="tab3" class="tab-pane">Content for Tab 3</div>
</div>

.tab-pane {
  display: none;
}

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

document.addEventListener('DOMContentLoaded', function() {
  // 设置默认选项卡
  const defaultTab = 'tab2'; // 假设我们希望默认显示Tab 2
  showTab(defaultTab);

  // 为每个选项卡按钮添加点击事件监听器
  document.querySelectorAll('.tab-button').forEach(button => {
    button.addEventListener('click', function() {
      const targetTab = button.getAttribute('data-tab');
      showTab(targetTab);
    });
  });

  function showTab(tabId) {
    // 隐藏所有选项卡内容
    document.querySelectorAll('.tab-pane').forEach(pane => {
      pane.classList.remove('active');
    });

    // 显示选中的选项卡内容
    document.getElementById(tabId).classList.add('active');
  }
});