如何用Bootstrap实现按钮切换显示对应价格计划表格？

嗨，这个需求用Bootstrap完全可以轻松实现，而且不需要依赖jQuery——Bootstrap 5已经原生移除了jQuery依赖，用原生JS+Bootstrap的内置类就能搞定！你的思路其实是对的：预先把三个套餐的表格都写在HTML里，通过控制显示/隐藏来切换，下面给你具体的实现方案：

核心思路 #

咱们就按你的想法落地：

1. 用Bootstrap的按钮组组件做三个切换按钮，统一排版
2. 预先渲染三个套餐表格，默认只显示一个，其余隐藏
3. 点击按钮时，切换按钮的激活状态，并显示对应表格、隐藏其他表格

完整代码实现 #

HTML结构 #

<!-- 套餐切换按钮组 -->
<div class="btn-group mb-4" role="group" aria-label="套餐选择">
  <button type="button" class="btn btn-primary package-btn active" data-target="#personal-table">Personal</button>
  <button type="button" class="btn btn-primary package-btn" data-target="#professional-table">Professional</button>
  <button type="button" class="btn btn-primary package-btn" data-target="#business-table">Business</button>
</div>

<!-- 套餐表格区域 -->
<div class="table-container">
  <!-- Personal套餐表格 -->
  <table id="personal-table" class="table table-bordered table-hover">
    <thead>
      <tr>
        <th>Personal套餐</th>
        <th>价格/权益</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>单用户权限</td>
        <td>$9/月</td>
      </tr>
      <tr>
        <td>基础功能包</td>
        <td>√</td>
      </tr>
      <tr>
        <td>邮件支持</td>
        <td>√</td>
      </tr>
    </tbody>
  </table>

  <!-- Professional套餐表格 -->
  <table id="professional-table" class="table table-bordered table-hover d-none">
    <thead>
      <tr>
        <th>Professional套餐</th>
        <th>价格/权益</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>5用户权限</td>
        <td>$29/月</td>
      </tr>
      <tr>
        <td>进阶功能包</td>
        <td>√</td>
      </tr>
      <tr>
        <td>优先邮件支持</td>
        <td>√</td>
      </tr>
      <tr>
        <td>数据导出</td>
        <td>√</td>
      </tr>
    </tbody>
  </table>

  <!-- Business套餐表格 -->
  <table id="business-table" class="table table-bordered table-hover d-none">
    <thead>
      <tr>
        <th>Business套餐</th>
        <th>价格/权益</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>无限用户权限</td>
        <td>$99/月</td>
      </tr>
      <tr>
        <td>全功能解锁</td>
        <td>√</td>
      </tr>
      <tr>
        <td>专属客户经理</td>
        <td>√</td>
      </tr>
      <tr>
        <td>定制化服务</td>
        <td>√</td>
      </tr>
    </tbody>
  </table>
</div>

原生JavaScript逻辑 #

// 获取所有套餐按钮和表格元素
const packageButtons = document.querySelectorAll('.package-btn');
const packageTables = document.querySelectorAll('.table-container table');

// 给每个按钮绑定点击事件
packageButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 1. 移除所有按钮的激活状态
    packageButtons.forEach(btn => btn.classList.remove('active'));
    // 2. 给当前点击的按钮添加激活状态
    button.classList.add('active');
    
    // 3. 获取目标表格的ID
    const targetTableId = button.getAttribute('data-target');
    // 4. 隐藏所有表格
    packageTables.forEach(table => table.classList.add('d-none'));
    // 5. 显示目标表格
    document.querySelector(targetTableId).classList.remove('d-none');
  });
});

可选优化：添加过渡动画 #

如果想要切换时的淡入淡出效果，可以替换Bootstrap的隐藏类，利用内置过渡动画：

• 把表格的d-none替换成fade，默认显示的表格再加show类
• JS里切换时用classList.toggle('show')代替add/remove('d-none')，就能实现平滑的过渡效果了

为什么不用jQuery？ #

Bootstrap 5已经完全移除了对jQuery的依赖，所有交互都可以用原生JS实现，这样能减少项目的依赖体积，也更符合现代前端的趋势。当然如果你的项目还在使用Bootstrap 4，也可以用jQuery实现，但原生JS的写法依然兼容。

你的思路验证 #

你的想法完全没问题：预先渲染所有表格，通过修改display属性（Bootstrap的d-none就是设置display: none）来控制显示隐藏，这种方式逻辑简单，对于价格表这种内容固定的场景非常合适，比动态加载DOM效率更高，也更容易维护。

内容的提问来源于stack exchange，提问作者Nato