使用Bootstrap和Thymeleaf从列表动态创建选项卡

鉴于我有一个对象列表“Bar”，每个Bar都有两个属性“title”和“content”：如何动态创建带调色板的选项卡列表中的每个Bar？使用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

请删除excelesive，封闭div（包含th:each属性的那些div）。另外，开始时只有一个选项卡应该是active，而不是全部。你应该在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从列表动态创建选项卡

回答

相关问题