javascript - 如何默认打开第一个选项卡 Thymeleaf Css Bootstrap

Question

我正在尝试使用 Thymleaf 和 Bootstrap 基于来自 Spring 后端的列表创建动态选项卡。我能够创建选项卡和内容，但问题是我的第一个选项卡默认情况下未打开，但当我单击时我可以打开它。

---

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

<div class="tab-content">
        <div class="tab-pane" th:id="${t.ticker}"th:classappend="${tNum.first} ? 'active'"  th:each="t, tNum: ${tx}">
            <h3 th:text = "${t.ticker}">bar content</h3> 
</div>
</div>

Answer 1

Here在它编写的文档中添加事件类以打开您想要的选项卡。

 <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>

 <div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>

我觉得这样就够了，你可以通过js或者html来添加。