在同一页上使用多个选项卡包装HTML/CSS表？

<div class="tab-container">
  <div class="tab">
    <button class="tab-link active" data-tab="tab1">选项卡1</button>
    <button class="tab-link" data-tab="tab2">选项卡2</button>
    <button class="tab-link" data-tab="tab3">选项卡3</button>
  </div>
  <div class="tab-content active" id="tab1">
    <!-- 选项卡1的内容 -->
  </div>
  <div class="tab-content" id="tab2">
    <!-- 选项卡2的内容 -->
  </div>
  <div class="tab-content" id="tab3">
    <!-- 选项卡3的内容 -->
  </div>
</div>

.tab-container {
  /* 设置容器样式 */
}

.tab {
  /* 设置选项卡标签样式 */
}

.tab-link {
  /* 设置选项卡标签按钮样式 */
}

.tab-content {
  /* 设置选项卡内容区域样式 */
  display: none;
}

.active {
  /* 设置当前选中选项卡的样式 */
}

const tabLinks = document.querySelectorAll('.tab-link');
const tabContents = document.querySelectorAll('.tab-content');

tabLinks.forEach(link => {
  link.addEventListener('click', () => {
    // 移除所有选项卡的active类
    tabLinks.forEach(link => link.classList.remove('active'));
    tabContents.forEach(content => content.classList.remove('active'));

    // 添加当前选中选项卡的active类
    link.classList.add('active');
    const tabId = link.getAttribute('data-tab');
    const tabContent = document.getElementById(tabId);
    tabContent.classList.add('active');
  });
});