基于上下文数据显示活动导航 [英] Displaying active navigation based on contextual data

问题描述

我在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";
}

或 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.

这篇关于基于上下文数据显示活动导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！