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

Question

我在Thymelaf模板中有以下分离的片段。

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

我想在活动导航元素中添加一个"活动"类，但在Thymlyaf中似乎很难实现。有什么建议吗？

Answer 1

您可以这样做：

<ul class="nav navbar-nav">
    <li th:classappend="${#httpServletRequest.getRequestURI() == '/dashboard' ? 'active':''}"><a th:href="@{/dashboard}"><span>Dashboard</span></a></li>
    <li th:classappend="${#httpServletRequest.getRequestURI() == '/orders' ? 'active':''}"><a th:href="@{/orders}"><span>Orders</span></a></li>
    <li th:classappend="${#httpServletRequest.getRequestURI() == '/income' ? 'active':''}"><a th:href="@{/income}"><span>Income</span></a></li>
    <li role="separator" ></li>
</ul>

Answer 2

虽然我认为这是一个丑陋的解决方案，很遗憾thymelaf没有一些宏，但您可以使用：

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

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

Answer 3

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

设置Controller.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";
    }
}

然后，在设置中包含的导航片段中。html:

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

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

Answer 4

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

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

• 在导航片段中添加一个参数（activeTab）

<div th:fragment="common-navbar(activeTab='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 5

对于那些使用Thymelaf 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 6

这段代码可能对某些人有所帮助。注意这不是Thymelaf解决方案，只是可以添加到页面上的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');

Answer 7

在Thymelaf 3.1.0+中，您可以提供类似以下的servlet路径

GlobalController.java:

@ControllerAdvice
public class GlobalController {
  @ModelAttribute("servletPath")
  String getRequestServletPath(HttpServletRequest request) {
    return request.getServletPath();
  }
}

然后你可以在你的html文件中使用${servletPath}：

示例navbar.html:

 <ul class="nav nav-pills">
     <li class="nav-item">
         <a class="nav-link" th:classappend="${servletPath == '/' ? 'active':''}" href="/">Home</a>
     </li>
     <li class="nav-item">
         <a class="nav-link" th:classappend="${servletPath == '/parties' ? 'active':''}" href="/csv">Parties</a>
     </li>
</ul>