実現したいこと
thymeleafを使用し、ナビゲーションバーで表示するコンテンツを切り替える仕組みを作りたいです。
【詳細】
・ナビゲーションメニュー内のタブをクリックすると、対応するidのコンテンツを表示させたい
実装方法
動作確認の為、純粋にHTML上でコーディングした所想定通りの動きをしました。
<main> <!-- ナビゲーションメニュー --> <ul class="nav nav-tabs"> <li class="nav-item"> <a href="#list1" class="nav-link active" data-toggle="tab">タブ1</a> </li> <li class="nav-item"> <a href="#list2" class="nav-link" data-toggle="tab">タブ2</a> </li> <li class="nav-item"> <a href="#list3" class="nav-link" data-toggle="tab">タブ3</a> </li> <li class="nav-item"> <a href="#list4" class="nav-link" data-toggle="tab">タブ4</a> </li> </ul> <!-- ナビゲーションバーによるコンテンツの表示分け--> <div class="tab-content"> <div id="list1" class="tab-pane"> <p>コンテンツ1</p> </div> <div id="list2" class="tab-pane"> <p>コンテンツ2</p> </div> <div id="list3" class="tab-pane"> <p>コンテンツ3</p> </div> <div id="list4" class="tab-pane"> <p>コンテンツ4</p> </div> </div> </main>
此方を、thymleleafで記述すると"コンテンツ"部分がどのタブを押しても全て表示されてしまいます
<main class="p-3"> <!-- 月別分のタブ --> <ul class="nav nav-tabs"> <li class="nav-item" th:each="i : ${#numbers.sequence(1,4)}"> <a th:href="@{'#list' +${i}}" class="nav-link" data-toggle="tab" th:text="'タブ' + ${i}">タブ1</a> </li> </ul> <!-- ナビゲーションバーによる表示分け--> <div class="tab-content"> <div th:each="i : ${#numbers.sequence(1,4)}"> <div th:id="'list' +${i}" class="tab-pane" th:text="${i} + '番目'">s</div> </div> </div> </main>
thymeleaftでの記述の内、コンテンツ部分を純粋にHTMLで記述すると想定通りの挙動となります。
href属性の紐づけはth:idによる動的に生成されたidでは不可能なのでしょうか?
回答1件
あなたの回答
tips
プレビュー