java 根据上下文数据显示活动导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28559817/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Displaying active navigation based on contextual data
提问by thevangelist
I have the following separated fragment in a Thymeleaf template.
我在 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>
I want to add an "active" class to active navigation element — but it seems hard to accomplish in Thymyleaf. Any suggestions?
我想向活动导航元素添加一个“活动”类——但在 Thymyleaf 中似乎很难完成。有什么建议？
采纳答案by lgd
You could add a ModelAttributewith the value activein your controllers for each page, e.g. :
您可以为每个页面在控制器中添加一个具有活动值的ModelAttribute，例如：
SettingsController.java
设置控制器.java
@RequestMapping("/settings")
public String viewSettings(Model model) {
// do stuff
model.addAttribute("classActiveSettings","active");
return "settings";
}
OR in a SettingsControllerAdvice.java
或在SettingsControllerAdvice.java 中
@ControllerAdvice(assignableTypes = SettingsController.class)
public class SettingsControllerAdvice {
@ModelAttribute("classActiveSettings")
public String cssActivePage() {
return "active";
}
}
Then, in the navigation fragment included in your settings.html:
然后，在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.
最后，您可以对导航栏中的每个控制器和链接重复此过程。
回答by Denger Tung
You can do this:
你可以这样做：
<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>
回答by lukyer
Although i think it is ugly solution and it is pity that thymeleaf does not have some macros for it, you can use:
虽然我认为这是一个丑陋的解决方案，很遗憾 thymeleaf 没有一些宏，但您可以使用：
<li th:classappend="${#httpServletRequest.getRequestURI().startsWith('/hotels') ? 'active':''}">
Hotel
</li>
It will work also for "deeper" links like /hotels/newso it is usable also for multilevel menus.
它也适用于“更深”的链接，如/hotels/new，因此它也可用于多级菜单。
回答by Ahmad
while this is an old question, I want to share this solution as it could be much more elegant!
虽然这是一个老问题，但我想分享这个解决方案，因为它可能更优雅！
http://nixmash.com/post/bootstrap-navbar-highlighting-in-thymeleaf
http://nixmash.com/post/bootstrap-navbar-highlighting-in-thymeleaf
- Add a parameter (activeTab) to the navigation fragment.
- 向导航片段添加一个参数 (activeTab)。
<div th:fragment="common-navbar(activeTab)"></div>
- pass the value of it in the main pages that use the navbar fragment
- 在使用导航栏片段的主页中传递它的值
<div th:replace="common/navbar :: common-navbar(about)"></div>
- check for it in 'li' element to set the 'active' class
- 在 'li' 元素中检查它以设置 'active' 类
<li th:class="${activeTab == 'about'}? 'active' : null"><a href="">About</a></li>
回答by Rodney Kimathi
For those using Thymeleaf 3:
对于使用 Thymeleaf 3 的用户：
<a th:href="@{/home}" th:classappend="${#request.getRequestURI() == '/home' ? 'active' : ''}">Home</a>
If you have a context path on your application:
如果您的应用程序有上下文路径：
<a th:href="@{/home}" th:classappend="${#request.getRequestURI() == '/context-path/home' ? 'active' : ''}">Home</a>
Edit:
编辑：
To be concise:
简明扼要：
<a th:href="@{/home}" th:classappend="${#request.getServletPath() == '/home' ? 'active' : ''}">Home</a>
The benefit to using request.getServletPath()is that it ignores the context path, if there is one.
使用的好处request.getServletPath()是它会忽略上下文路径（如果有的话）。
回答by Orkhan Hasanli
May be this code would be helpful for someone. Attention! It's not Thymeleaf solution, just js code which you can add on your pages.
可能是这段代码对某人有帮助。注意力！这不是 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');
