Блог

Я пытаюсь создать динамические вкладки на основе списка из серверной части Spring, используя Thymleaf и Bootstrap. Я могу создавать вкладки и содержимое, но проблема в том, что моя первая вкладка не открывается по умолчанию, но когда я нажимаю, я могу ее открыть.

 <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>
  

Здесь в документации написано добавить активный класс, чтобы открыть нужную вкладку.

  <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.