时间戳

首页 > 解决方案 > 跳转到其他网页上的thymeleaf-iterated部分

html - 跳转到其他网页上的thymeleaf-iterated部分

问题描述

我尝试跳转到另一个页面上的一个部分，该部分是th:each循环中的一个条目。

我在一个页面上有一个学生姓名列表，单击它将带您进入一个页面，其中包含每个用户的更多信息：

<div th:each="student : ${getAllStudents()}">
    <a th:href="@{linkToOtherPage}">[[${student.name}]]</a>
</div>

在另一页上，我拥有的每个用户都有额外的信息：

<div th:each="student : ${getAllStudents()}">
    <div id="studentInformation">
        <h1>[[${student.name}]]</h1>
        <h3>[[${student.age}]]</h3>
        ...
    </div>
</div>

所以说，在列表中的第一个位置上有一个叫罗伯特的人，在第 20 个位置上有一个叫桑迪的人。单击桑迪的名字时，我需要做什么才能跳转到桑迪？

我尝试将#studentInformation学生姓名添加到页面中，因此：

<div th:each="student : ${getAllStudents()}">
    <a th:href="@{linkToOtherPage}#studentInformation">[[${student.name}]]</a>
</div>

但这将我带到了页面的顶部。

标签： htmlhyperlinkthymeleaf

解决方案

如果您想使用 链接到某个部分#expression，则该表达式必须是唯一的。如果您使用#studentInformation每个部分，它不知道链接到哪里。

如果列表总是以相同的顺序排列，那么这样的事情对你有用：

第一页：

<div th:each="student, status: ${getAllStudents()}">
    <a th:href="|@{linkToOtherPage}#student${status.index}|">[[${student.name}]]</a>
</div>

第二页：

<div th:each="student, status: ${getAllStudents()}">
    <div th:id="|student${status.index}|">
        <h1>[[${student.name}]]</h1>
        <h3>[[${student.age}]]</h3>
        ...
    </div>
</div>

（通过将数组中的索引附加到每个 id，您可以链接到单个学生。）

推荐阅读