单击Vanilla JavaScript按钮时转到折叠选项卡

<button id="toggleButton">Toggle Tabs</button>

<div class="tab">
  <button class="tabButton">Tab 1</button>
  <div class="tabContent">Content 1</div>
</div>

<div class="tab">
  <button class="tabButton">Tab 2</button>
  <div class="tabContent">Content 2</div>
</div>

<div class="tab">
  <button class="tabButton">Tab 3</button>
  <div class="tabContent">Content 3</div>
</div>

// 获取按钮和选项卡元素
const toggleButton = document.getElementById('toggleButton');
const tabButtons = document.querySelectorAll('.tabButton');
const tabContents = document.querySelectorAll('.tabContent');

// 添加按钮点击事件监听器
toggleButton.addEventListener('click', () => {
  // 切换选项卡的显示与隐藏
  tabContents.forEach(tabContent => {
    tabContent.classList.toggle('hidden');
  });
});

// 添加选项卡按钮点击事件监听器
tabButtons.forEach((tabButton, index) => {
  tabButton.addEventListener('click', () => {
    // 隐藏所有选项卡内容
    tabContents.forEach(tabContent => {
      tabContent.classList.add('hidden');
    });
    
    // 显示当前点击的选项卡内容
    tabContents[index].classList.remove('hidden');
  });
});

.tabContent {
  display: none;
}

.hidden {
  display: none;
}