Javascript将一个选项卡带到前面

<div class="tab-container">
  <button class="tab-button active" data-tab="tab1">选项卡1</button>
  <button class="tab-button" data-tab="tab2">选项卡2</button>
  <button class="tab-button" data-tab="tab3">选项卡3</button>
</div>

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

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

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

.tab-container {
  /* 定义选项卡容器的样式 */
}

.tab-button {
  /* 定义选项卡按钮的样式 */
}

.tab-button.active {
  /* 定义选项卡按钮被选中时的样式 */
}

.tab-content {
  /* 定义选项卡内容的样式 */
  display: none;
}

// 获取所有选项卡按钮
const tabButtons = document.querySelectorAll('.tab-button');

// 获取所有选项卡内容
const tabContents = document.querySelectorAll('.tab-content');

// 为每个选项卡按钮添加点击事件监听器
tabButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 移除所有选项卡按钮的active类名
    tabButtons.forEach(btn => btn.classList.remove('active'));

    // 隐藏所有选项卡内容
    tabContents.forEach(content => content.style.display = 'none');

    // 添加当前选项卡按钮的active类名
    button.classList.add('active');

    // 显示对应的选项卡内容
    const tabId = button.getAttribute('data-tab');
    const tabContent = document.getElementById(tabId);
    tabContent.style.display = 'block';
  });
});