根据上下文数据显示主动导航答案

【问题标题】：Displaying active navigation based on contextual data根据上下文数据显示主动导航
【发布时间】：2015-04-18 01:11:15
【问题描述】：

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

我想为活动导航元素添加一个“活动”类——但在 Thymyleaf 中似乎很难实现。有什么建议吗？

【问题讨论】：

标签： java spring jsp navigation thymeleaf

【解决方案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>

【讨论】：

感谢我正在寻找的东西。
我更喜欢这个而不是接受的答案。更好地分离关注点。无需将仅与视图相关的东西弄乱服务器端。
#httpServletRequest.getRequestURI() 可以缩写为#request.requestURI。
绝对是比公认的更好的答案。控制器不应处理视图元素类。
绝对精彩！

【解决方案2】：

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

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

它也适用于像 /hotels/new 这样的“更深”的链接，因此它也可用于多级菜单。

【讨论】：

【解决方案3】：

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

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 中包含的导航片段中：

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

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

【讨论】：

我可以在某种上下文处理器等中添加它吗？所以我不需要明确处理这个？
我不知道，我从未尝试过。但是您可以在 ControllerAdvice 中定义它（使用 @ModelAttribute 注释的方法）；它可能不那么难看，更容易更新。我编辑我的帖子给你这个选择。
如果你这样做（到处重复导航），你可以硬编码它：class="active" 并避免任何控制器设置。
不妨像 Stefan 所说的那样对其进行硬编码。我将导航菜单作为片段，它替换了几个 html 页面中的菜单。所以这种方式是不可能的。我必须使用另一种方式，例如 Denger Tung 提供的方式。

【解决方案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”元素中检查它以设置“活动”类

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

【讨论】：

【解决方案5】：

对于那些使用 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() 的好处是它会忽略上下文路径（如果有的话）。

【讨论】：

【解决方案6】：

可能此代码对某人有帮助。注意力！这不是 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');

【讨论】：