如何在Thymeleaf+Bootstrap中默认激活首个动态标签页

我来帮你搞定这个默认激活的小问题！你的代码思路本身没问题，但有个Bootstrap标签页的细节没踩对，咱们调整一下就能解决：

问题根源 #

Bootstrap的tab-pane要默认显示，必须同时添加active和show两个类，只加active是不足以让内容默认展示的；另外咱们可以把循环的状态变量区分开，让代码可读性更好。

修正后的完整代码 #

<ul class="nav nav-tabs">
    <li class="nav-item" th:each="tab, tabStatus : ${tx}">
        <a class="nav-link" 
           th:classappend="${tabStatus.first} ? 'active'" 
           th:href="@{'#' + ${tab.ticker}}" 
           data-toggle="tab">
            <label th:text="${tab.ticker}">bar title</label>
        </a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane" 
         th:id="${tab.ticker}" 
         th:classappend="${contentStatus.first} ? 'active show'" 
         th:each="tab, contentStatus : ${tx}">
        <h3 th:text="${tab.ticker}">bar content</h3>
    </div>
</div>

关键修改说明 #

• 把两个循环的状态变量分别命名为tabStatus和contentStatus，避免变量名重复，代码逻辑更清晰
• 给默认激活的tab-pane同时加上active show类，这是Bootstrap要求的内容默认显示的必要条件
• 锚点链接和标签页ID的对应逻辑保持不变，你的代码这部分是正确的

这样调整后，第一个标签页就会自动激活并显示对应的内容啦！

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