Question

I am trying to create dynamic tabs based on the list from Spring backend using Thymleaf and Bootstrap. I am able to create the tabs and content but the issue is my first tab is not opening by default but when i click i can open it.

<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 in the documentation it write to add the active class to open the tab you want.

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

I think this is enough, you can add it either via js or html.

How to open first tab by default Thymeleaf Css Bootstrap

1 个答案: