本文详解 Bootstrap 5 选项卡组件的完整实现，重点说明 data-toggle → data-bs-toggle 的属性变更、必需的 Ja vaScript 加载方式，以及 tab-pane 类名更新（fade show active），并提供可直接运行的完整示例。

从 Bootstrap 4 升级到版本 5，很多开发者都卡在了选项卡（Tabs）这个看似简单的组件上。点击没反应、内容不切换——这些问题十有八九，都源于几个必须更新的关键细节。今天，我们就来彻底理清 Bootstrap 5 中选项卡的正确用法，确保你的迁移之路畅通无阻。

? 必须完成的三项升级

想让选项卡在 Bootstrap 5 中正常工作，下面这三项改动一个都不能少。它们正是导致“点击无响应”的罪魁祸首。

1. data-toggle → data-bs-toggle
   这是最核心的变更。Bootstrap 5 为所有自定义数据属性统一加上了 bs- 命名空间前缀。所以，原来的 data-toggle="tab" 必须改为 data-bs-toggle="tab"。如果忘了改，Ja vaScript 压根儿识别不了你的点击意图。

2. 移除 jQuery，改用 Bootstrap Bundle JS
   Bootstrap 5 已经彻底告别了 jQuery 依赖。这意味着，你不能再引入 jquery.min.js 了。正确的做法是加载官方提供的 bootstrap.bundle.min.js（这个文件包含了 Popper，无需额外引入）。记住，这个 JS 文件必须在 Bootstrap CSS 之后引入，通常放在 底部或 中。

3. tab-pane 类名规范：fade show active
   内容面板的类名约定也变得更明确了。默认激活的面板，需要同时包含 fade（启用淡入动画）、show（显式显示）和 active（标识激活状态）这三个类。而非激活的面板，只需要 fade（可选）和 tab-pane，千万别加 show 或 active。这个新约定，缺一不可。

? 完整可运行示例（已验证）

理论说再多，不如一段能直接运行的代码来得实在。下面这个示例已经过验证，你可以直接复制使用。

  
  
  
  
  
  
  


  

    
Bootstrap 5 Tabs
    
    

      

        Home
      
      

        Help
      
    
    
    

      

        
Welcome to Home
        
This is the active tab panel with proper Bootstrap 5 classes: fade show active.
      
      

        
Need Help?
        
Click tabs above to switch. No jQuery required — pu re Bootstrap 5.
      
    
  

?? 注意事项与最佳实践

搞定核心升级后，还有一些细节能让你用得更顺手、更专业：

• 不要混用 a 标签与 button 标签：虽然用 标签在语义上似乎更符合导航，但 Bootstrap 5 官方文档明确推荐使用 标签（并配合 role="tab" 和 aria-* 属性），这能带来更好的可访问性（a11y）支持。上面的示例采用的就是这种更优的写法。
• id 与 data-bs-target 必须严格匹配：比如 data-bs-target="#home" 必须对应
  ，大小写和符号都要一模一样，一个字符都不能错。
• 禁用内联脚本初始化：Bootstrap 5 的 Tabs 组件会通过 data-bs-toggle 属性自动完成初始化，你不需要再手动写 new bootstrap.Tab(...) 这样的代码了，除非你需要通过编程方式去控制它。
• CDN 版本建议锁定：在生产环境中，强烈建议使用固定的版本号（例如 @5.3.2），而不是使用 @latest 标签。这样可以避免因 CDN 自动更新到新版本而引发的意外兼容性问题。

《夸克》非常好用的免费AI浏览器

下载APP查看