Question

我在Thymeleaf模板中有以下分隔的片段。

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

我想添加＆＃34;有效＆＃34;类到主动导航元素 - 但在Thymyleaf中似乎很难实现。有什么建议吗？

Answer 1

虽然我认为这是丑陋的解决方案，但遗憾的是百里香叶没有一些宏，你可以使用：

<li th:classappend="${#httpServletRequest.getRequestURI().startsWith('/hotels') ? 'active':''}">
    Hotel
</li>

它也适用于 / hotels / new 等“更深层次”的链接，因此它也适用于多级菜单。

Answer 2

您可以在控制器中为每个页面添加值 active 的 ModelAttribute ，例如：

SettingsController.java

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

在 SettingsControllerAdvice.java

中的OR

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

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

}

然后，在 settings.html 中包含的导航片段中

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

最后，您可以为导航栏中的每个控制器和链接重复此过程。

Answer 3

虽然这是一个老问题，但我想分享这个解决方案，因为它可能更优雅！

http://nixmash.com/post/bootstrap-navbar-highlighting-in-thymeleaf

将参数（activeTab）添加到导航片段。

<div th:fragment="common-navbar(activeTab)"></div>

在使用导航栏片段

 <div th:replace="common/navbar :: common-navbar(about)"></div>

在'li'元素中检查它以设置'active'类

 <li th:class="${activeTab == 'about'}? 'active' : null"><a href="">About</a></li>

Answer 4

对于那些使用Thymeleaf 3的人：

<a th:href="@{/home}" th:classappend="${#request.getRequestURI() == '/home' ? 'active' : ''}">Home</a>

如果您的应用程序有上下文路径：

<a th:href="@{/home}" th:classappend="${#request.getRequestURI() == '/context-path/home' ? 'active' : ''}">Home</a>

修改

简明扼要：

<a th:href="@{/home}" th:classappend="${#request.getServletPath() == '/home' ? 'active' : ''}">Home</a>

使用request.getServletPath()的好处是它忽略了上下文路径（如果有的话）。

Answer 5

此代码可能对某人有用。注意！这不是Thymeleaf解决方案，只是可以在页面上添加的js代码。

var currentPage = location.href.match(/(.*?)([^\/]+)$/).pop();
        $(Array.prototype.filter.call($('.menu-head li a:nth-child(1)'), function(item)
        {
            return item.href.endsWith(currentPage)
        })).parents('li').addClass('active');

基于上下文数据显示活动导航

5 个答案: