将特定碎片附加到Springboot Thymeleaf项目

Question

我有一个带有列表的导航栏。列表中的元素之一是下拉列表，它由一个条目组成。单击此条目后，我想查看项目中另一个 html 页面的片段。

我有一个导航栏 html 文件：

<div th:fragment="navbar">
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <button class="navbar-toggler" type="button" data-toggle="collapse"
                data-target="#navbarTogglerDemo03"
                aria-controls="navbarTogglerDemo03" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> 
                    <li class="nav-item dropdown">
                        <a
                            class="nav-link dropdown-toggle" href="#"
                            id="navbarDropdownMenuLink"
                            role="button"
                            data-bs-toggle="dropdown">
                            Projects 
                         </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <li><a class="dropdown-item" 
                                href="projects/sample.html#content"> ProjectList</a> <!--error-->
                          </li>
                        </ul>
                </ul>
            </div>

        </nav>
    </div>

以及项目结构： 我在 src/main/resources 中有一个名为 projects 的文件夹，在 projects 文件夹中，我有一个 html 文件 sample.html ，它有一个片段内容

<div th:fragment="content">
        
</div>

----更新---

添加图像：

所以目前，我希望仅当我单击下拉列表“ProjectList”中的元素时才显示片段。所以我认为链接应该出现在 href 标签中？ 但无法理解如何。 这里的任何指导都会有帮助

Answer 1

如果projects/sample.html是您的模板forlder，那么尝试：

<div th:insert"~{projects/sample :: content}"></div>

如果您想实时更改加载的模板（点击），您可以：

• 使用动态加载：这个问题与您的问题很接近：点击列表项时隐藏其他项

• 加载div，通过CSS隐藏它并使用javascript显示它： 如何显示和隐藏简单的

  列表与onclick？（并使用JS与thymeleafJavascript函数调用与Thymeleaf )

• 最后，如果您想根据当前 URL 加载完整内容，我认为您把问题搞错了。每个页面都应包含页眉/菜单/页脚（通过将它们引用为插入），并使用 th:href 根据 url 加载内容（请参阅 Thymeleaf 使用 th:href 的路径变量)