Bootstrap 5标签切换异常：标签内容不显示也不切换

你的HTML结构符合Bootstrap标签组件的规范，核心问题是未加载标签功能所需的JavaScript依赖，或是依赖加载存在问题。

必做检查项： #

• 确认页面已加载jQuery（Bootstrap 3/4的tab功能依赖它；若用Bootstrap 5，需将data-toggle改为data-bs-toggle，且无需jQuery）
• 加载对应版本的Bootstrap JavaScript文件
• 确保Bootstrap CSS已正确引入（否则切换的视觉效果也会异常）

以Bootstrap 4为例，完整依赖引入示例：

<!-- 放在<head>标签内 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

<!-- 放在</body>闭合标签前 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

额外排查方向： #

1. 版本类名冲突：你的激活状态标签同时使用了in active show，Bootstrap 3用active in，Bootstrap 4用active show，混用会导致样式或逻辑异常，建议统一为对应版本的类名。
2. 脚本冲突：打开浏览器开发者工具（F12）查看控制台，确认是否有其他脚本覆盖jQuery、阻止点击事件等报错。
3. 手动初始化组件：若自动初始化失效，可添加手动初始化代码：

$(document).ready(function() {
  $('.nav-link').on('click', function(e) {
    $(this).tab('show');
  });
});

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