Jon*_*Jon 18 node.js express pug
我有一个具有通过无序列表的菜单布局玉看法,我想设置的<li>是<li class="active">...</li>在当前页面中浏览器中呈现.
我假设我将不得不访问当前请求以确定何时设置属性 <li>
我找不到任何如何做到这一点的例子,希望有人可以提供帮助
谢谢
cho*_*ovy 35
在您的路线中呼叫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
但是,我宁愿在客户端这样做,以保持我的模板文件尽可能多的逻辑:
在页面模板文件中(这是ejs,不知道如何在jade中回显):
<body data-path="<%= path %>">
然后使用jQuery,您可以从body获取路径并附加活动类:
$(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');
});
这是一个更简洁的方法,服务器端:
在你的routes.js(或任何地方)定义一个代表你的导航的对象数组,如:
var navLinks = [
{ label: 'Home', key: 'home', path: '' },
{ label: 'About', key: 'about', path: '/about' },
{ label: 'Contact', key: 'contact', path: '/contact' }
]
将navLinks变量传递给您的视图,以及您想要突出显示的项目的键:
res.render('home', { title: 'Welcome!', section: 'home', navLinks: navLinks });
您还可以将navLinks变量添加到app.locals并保存自己,始终必须明确地将其提供给视图.
然后在你的jade模板中循环遍历链接数组,并在其键与提供的部分匹配的那个上设置活动类:
ul(class='nav nav-list')
- navLinks.forEach(function(link){
- var isActive = (link.key == section ? 'active' : '')
li(class=isActive)
a(href=link.path)= link.label
- })
| 归档时间： |
|
| 查看次数： |
18905 次 |
| 最近记录： |