BootstrapとThymeleafを使ってリストからタブを動的に作成する

私はオブジェクト "Bar"のリストを持っており、各バーには2つのプロパティ "title"と "content"があります：どのように動的にパレットを持つタブを作成できますか？リストの各バーは？BootstrapとThymeleafを使ってリストからタブを動的に作成する

このHTMLは動作しません：開かれたタブは、各タブをクリックした後、下図のように、次々に記載されています：

ここで有罪コード：

を

<!DOCTYPE HTML> 
<html xmlns:th="http://www.thymeleaf.org"> 
    <head> 
    <title>Bar's tab</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous" /> 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
    </head> 
    <body> 
    <div class="container"> 

     <ul class="nav nav-tabs" > 
     <div th:each="bar: ${bar_list}"> 
      <li class="nav-item"> 
      <a class="nav-link" th:href="@{'#'+ ${bar.title}}" data-toggle="tab"><label th:text="${bar.title}">bar title</label></a> 
      </li> 
     </div> 
     </ul> 

     <div class="tab-content" > 
     <div th:each="bar : ${bar_list}"> 
       <div class="tab-pane fade active" th:id="${bar.title}"> 
        <p th:text = "${bar.content}">bar content</p> 
       </div>   
     </div> 
     </div> 

    </div> 
    </body> 
</html>

出典

2017-10-05 Andrea T

例外的な包囲div（th:each属性を含むdiv）を削除してください。さらに、最初はすべてactiveの1つのタブペインしか表示されません。これを達成するには、th:classappendの中にいくつかの条件を追加する必要があります。

<body>には、次の内容が含まれている必要があります。それは私のために完全に動作します：

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

    <div class="tab-content" > 
     <div class="tab-pane fade" th:classappend="${barStat.first} ? 'show active'" th:id="${bar.title}" th:each="bar, barStat : ${bar_list}"> 
      <p th:text = "${bar.content}">bar content</p> 
     </div> 
    </div> 
</div>

出典

2017-10-05 21:17:57

ありがとうございます。改善点がありますが、ペインの内容は変更されません。：は "コンテンツ1"のままです（頭が異なるかもしれません） –

解決済みタイトルに空白がありませんありがとうございました！ –

BootstrapとThymeleafを使ってリストからタブを動的に作成する

答えて

関連する問題