本文详解 Bootstrap 5 中 Tabs 组件的使用规范，重点说明 data-toggle → data-bs-toggle 的属性变更、必需的 Ja vaScript 加载方式（需引入 bootstrap.bundle.min.js），以及 .tab-pane 类名中新增的 show 类作用。

从 Bootstrap 4 升级到 5，很多开发者都卡在了看似简单的 Tab 组件上。代码复制过来，样式还在，但点击切换功能却失效了。这背后，其实是 Bootstrap 5 对底层交互逻辑进行了一次彻底的“现代化手术”。今天，我们就来把这三个最关键的迁移要点掰开揉碎讲清楚。

Bootstrap 5 对组件的 Ja vaScript 行为和数据属性进行了标准化重构，其中 Tabs 是典型需要适配的组件之一。与 Bootstrap 4 相比，最核心的变更包括三方面：数据属性前缀统一为 `data-bs-`、必须加载 Bootstrap 官方 JS（推荐 bundle 版本）、以及 .tab-pane 的显隐逻辑依赖 `fade show active` 组合类（`show` 不再可选，而是激活态的必要类）。

光说不练假把式，下面是一个完整、可直接运行的 Bootstrap 5 Tabs 示例，你可以直接复制到本地文件测试：

  
  
  
  
  
  
  


  

    
Bootstrap 5 Tabs
    
    

      

        Home
      
      

        Help
      
    
    
    

      

        
Home Content
        
This is the active tab panel. Note: show class is now required for visible state.
      
      

        
Help Content
        
This tab will be shown only when clicked — thanks to Bootstrap’s built-in JS handlers.
      
    
  

? 关键注意事项

代码跑起来了，但为什么这么写？我们来逐一拆解背后的逻辑，这能帮你避开未来所有的坑。

• data-bs-toggle="tab" 是强制要求：这是最容易忽略的一点。Bootstrap 5 彻底移除了对 jQuery 的依赖，所有交互式组件均通过原生的 `data-bs-*` 属性来触发 Ja vaScript 行为。如果你图省事，沿用旧版的 `data-toggle`，那么点击事件根本不会被 Bootstrap 的 JS 捕获，切换功能自然就失效了。
• 必须引入 bootstrap.bundle.min.js：另一个常见错误是只引入了 `bootstrap.min.js`。Bootstrap 5 将 Popper.js（用于处理定位，如下拉菜单、提示框）内置到了 `bundle` 版本中。如果只用 `bootstrap.min.js`，像 Tab 切换这类依赖精准定位的组件就可能出现异常。所以，记住这个最佳实践：直接引入 `bootstrap.bundle.min.js`，一劳永逸。
• .tab-pane.fade.show.active 缺一不可：这个组合类是 Bootstrap 5 显隐逻辑的核心变化。`fade` 提供了淡入淡出动画的基础；`active` 标识当前激活的标签页；而新增的 `show` 类，现在是控制面板“可见性”的实际开关。三者必须同时出现在初始激活的 `.tab-pane` 上，才能正确渲染出内容。少一个，你可能看到的就是一片空白。
• 语义化增强：虽然不影响功能，但为 `
  ` 添加 `role="tablist"`，为每个 `` 添加 `role="tab"` 及相应的 `aria-controls`、`aria-selected` 属性，是提升网站无障碍访问（Accessibility）支持的好习惯，能让屏幕阅读器等辅助技术更好地理解你的页面结构。

  当然，除了通过点击自动切换，有时我们也需要通过 Ja vaScript 手动控制。方法也很直观：

  const triggerEl = document.querySelector('#myTab a[href="#profile"]');
  bootstrap.Tab.getInstance(triggerEl).show(); // 激活指定 Tab

  总结一下，从 Bootstrap 4 迁移到 5，处理 Tabs 组件时，你只需要盯紧这三件事：属性前缀换成 `data-bs-`、引入正确的 Bundle JS 文件、以及为激活的面板补上 `show` 类。把这几个要点掌握到位，迁移过程就能平滑无感，确保功能、语义和用户体验都完整地继承下来。

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

  下载APP查看