Question

鉴于我有一个对象列表＆＃34; Bar＆＃34;每个酒吧都有两个属性＆＃34; title＆＃34;和＆＃34;内容＆＃34;：如何为列表中的每个Bar动态创建带有调色板的选项卡？

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

Answer 1

请删除异常的封闭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>

使用Bootstrap和Thymeleaf从List动态创建Tabs

1 个答案: