我有一个布局的玉视图通过无序列表有一个菜单,我想设置< li>为< li class =“active”> …< / li>当前页面在浏览器中呈现.
我假设我将不得不访问当前的请求,以确定何时在< li>上设置属性
我找不到任何例子,如何做到这一点,希望有人可以帮助
谢谢
解决方法
在您的路由中调用res.render()之前尝试这样做：
res.locals.path = req.path;
res.render('/page');
要么
res.render('/page',{ path: req.path });
那么你必须在你的视图中做一堆if / else语句(如上面的解决方案所示).
- if(currentUrl === '/')
li(class='active')
a(href='/') Current Driver Standings
- else
li
a(href='/') Current Driver Standings
但是,我更愿意在客户端执行此操作,以使我的模板文件免于尽可能多的逻辑：
<body data-path="<%= path %>">
$(function(){
var path = $('body').attr('data-path');
$('nav li a[href='+path+']').parents('li').addClass('active');
});
更新：您也可以使用var path = window.location.pathname,而不是将其保存到body上的属性
//no need to save path to <body> tag first: $(function(){ var path = window.location.pathname; $('nav li a[href='+path+']').parents('li').addClass('active'); });
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
