Bootstrap导航Pill已激活但内容不显示，如何解决？

核心原因 #

1. 服务器端渲染状态不同步：你只给Admin的导航Pill添加了active类，但对应的tab-pane没有同步加上active show类——这是Bootstrap控制tab内容显示的核心类，页面加载时内容区默认处于隐藏状态，只有切换tab时JS才会给对应区域补上这两个类。
2. 动态元素未初始化：由于Admin的tab元素是通过Thymeleaf权限控制动态渲染的，Bootstrap的tab组件在页面初始加载时可能未识别到这个动态生成的元素，导致无法自动激活对应的内容区。

修复步骤 #

1. 同步服务器端的active状态

修改Thymeleaf代码，确保Admin权限下，对应的tab-pane也被加上active show类，和导航Pill的状态保持一致：

<!-- 导航Pills -->
<ul class="nav nav-pills" role="tablist">
  <li class="nav-item">
    <a class="nav-link" 
       th:if="${#authorization.expression('hasRole(''ADMIN'')')}"
       th:classappend="${#authorization.expression('hasRole(''ADMIN'')')} ? 'active' : ''"
       data-bs-toggle="pill" 
       href="#admin-tab"
       role="tab">
      Admin
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link"
       th:classappend="${!#authorization.expression('hasRole(''ADMIN'')')} ? 'active' : ''"
       data-bs-toggle="pill" 
       href="#user-tab"
       role="tab">
      User
    </a>
  </li>
</ul>

<!-- Tab内容区 -->
<div class="tab-content">
  <div class="tab-pane"
       th:if="${#authorization.expression('hasRole(''ADMIN'')')}"
       th:classappend="${#authorization.expression('hasRole(''ADMIN'')')} ? 'active show' : ''"
       id="admin-tab"
       role="tabpanel">
    <!-- Admin专属内容 -->
  </div>
  <div class="tab-pane"
       th:classappend="${!#authorization.expression('hasRole(''ADMIN'')')} ? 'active show' : ''"
       id="user-tab"
       role="tabpanel">
    <!-- User内容 -->
  </div>
</div>

2. 手动初始化Tab组件（可选但保险）

如果同步类后仍有问题，说明动态渲染的Tab未被Bootstrap正确初始化，可以在页面底部添加JS代码，强制触发Tab的激活逻辑：

document.addEventListener('DOMContentLoaded', function() {
  // 初始化所有Tab组件
  const tabs = document.querySelectorAll('[data-bs-toggle="pill"]');
  tabs.forEach(tab => new bootstrap.Tab(tab));
  
  // 强制激活当前标记为active的Tab
  const activeTab = document.querySelector('.nav-pills .nav-link.active');
  if (activeTab) {
    bootstrap.Tab.getInstance(activeTab).show();
  }
});

3. 确保Tab结构合规

确认导航Pills的容器<ul>已经正确添加role="tablist"属性，每个导航链接添加role="tab"，对应的内容区添加role="tabpanel"——这是Bootstrap Tab组件的标准语义化要求，能避免一些初始化异常。

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