生成%1个可切换表格，而不是%1页上的%3个表格

<div class="table-container">
  <ul class="tab-list">
    <li class="tab-item active">表格1</li>
    <li class="tab-item">表格2</li>
    <li class="tab-item">表格3</li>
  </ul>
  <div class="table-content">
    <table class="table active">
      <!-- 表格1的内容 -->
    </table>
    <table class="table">
      <!-- 表格2的内容 -->
    </table>
    <table class="table">
      <!-- 表格3的内容 -->
    </table>
  </div>
</div>

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

.tab-list {
  /* 设置选项卡列表样式 */
}

.tab-item {
  /* 设置选项卡项样式 */
}

.table-content {
  /* 设置表格内容容器样式 */
}

.table {
  display: none; /* 默认隐藏所有表格 */
}

.table.active {
  display: table; /* 显示当前选中的表格 */
}

const tabItems = document.querySelectorAll('.tab-item');
const tables = document.querySelectorAll('.table');

tabItems.forEach((item, index) => {
  item.addEventListener('click', () => {
    // 移除所有选项卡的active类名
    tabItems.forEach(tab => tab.classList.remove('active'));
    // 添加当前选中选项卡的active类名
    item.classList.add('active');
    // 隐藏所有表格
    tables.forEach(table => table.classList.remove('active'));
    // 显示对应索引的表格
    tables[index].classList.add('active');
  });
});