鉴于我有一个对象列表“Bar”，每个 Bar 都有两个属性“title”和“content”: 如何为列表中的每个栏动态创建一个带有调色板的选项卡？
此 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>
最佳答案
请删除过多的封闭 div(那些包含 th:each 属性的)。此外，只有一个选项卡 Pane 应该是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>
关于twitter-bootstrap - 使用 Bootstrap 和 Thymeleaf 从列表中动态创建选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46588780/