問題描述

我在 Thymeleaf 模板中有以下分離的片段.

I have the following separated fragment in a Thymeleaf template.

<ul class="nav nav-tabs">
    <li role="presentation"><a href="/">Freight Invoices</a></li>
    <li role="presentation"><a href="/processed">Processed Invoices</a></li>
    <li role="presentation"><a href="/postingrules">Posting Rules</a></li>
    <li role="presentation" class="active"><a href="/settings">Settings</a></li>
</ul>

我想為活動導航元素添加一個活動"類——但在 Thymyleaf 中似乎很難實現.有什么建議嗎?

I want to add an "active" class to active navigation element — but it seems hard to accomplish in Thymyleaf. Any suggestions?

推薦答案

您可以在控制器中為每個頁面添加一個 ModelAttribute，其值為 active，例如:

You could add a ModelAttribute with the value active in your controllers for each page, e.g. :

SettingsController.java

@RequestMapping("/settings")
public String viewSettings(Model model) {
  // do stuff
  model.addAttribute("classActiveSettings","active");
  return "settings";
}

OR 在 SettingsControllerAdvice.java

@ControllerAdvice(assignableTypes = SettingsController.class)
public class SettingsControllerAdvice {

    @ModelAttribute("classActiveSettings")
    public String cssActivePage() {
        return "active";
    }

}

然后，在您的 settings.html 中包含的導航片段中:

Then, in the navigation fragment included in your settings.html :

<ul class="nav nav-tabs">
     <!-- Other links -->
    <li role="presentation" th:class="${classActiveSettings}">
       <a th:href="@{/settings}">Settings</a>
    </li>
</ul>

最后，您可以對導航欄中的每個控制器和鏈接重復此過程.

Finally, you can repeat this process for each controller and links in your navbar.

這篇關于根據上下文數據顯示主動導航的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！