Вкладки (tabs) bootstrap 4 и thymeleaf

Question

Есть 3 вкладки: Январь, Февраль, Март. Код bootsrap выглядит так

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#Jan">Январь</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#Feb">Февраль</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#Mar">Март</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="Jan">
    Месяц январь
  </div>
  <div class="tab-pane fade" id="Feb">
    Месяц февраль
  </div>
  <div class="tab-pane fade" id="Mar">
    Месяц март
  </div>
</div>

На данном этапе у меня есть простые кнопки:

<a th:href="@{/calendar/{id}/0(id=${user.tab_number})}">
  <button>Январь</button>
</a>
<a th:href="@{/calendar/{id}/1(id=${user.tab_number})}">
  <button>Февраль</button>
</a>

<a th:href="@{/calendar/{id}/2(id=${user.tab_number})}">
   <button>Март</button>
</a>

Не могу понять, как прикрутить к каждой вкладке (tabs) ссылку на нужную мне страницу с помощью Thymeleaf, чтобы нажимаешь на Январь, открывался контент с январем, нажимаешь на Февраль - с февралем и т.д...

Answer 1

Есть простое решение этой пробелы на Bootstrap4

<ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#january">Январь</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#february">Февраль</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#mart">Март</a>
        </li>
    </ul>


<div class="tab-content">
 <div class="tab-pane fade show active" id="january">
      <div>Январь...</div>
 </div>
 <div class="tab-pane fade" id="february">
      <div>Февраль...</div>
 </div>
 <div class="tab-pane fade" id="mart">
     <div>Март...</div>
 </div>

<a class="tab" th:utext="${template.get('tab[0].content')}">Ссылка 1</a>
<a class="tab" th:utext="${template.get('tab[1].content')}">Ссылка 2</a>

Можна ещё использовать решение представленое по следующей ссылке https://stackoverrun.com/ru/q/11406962

БЛОГ НА HUSL

Вкладки (tabs) bootstrap 4 и thymeleaf

Ответы (1 шт):