Heim > Fragen und Antworten > Hauptteil
最近在学习nodejs制作一个简单的个人网站,模版用的ejs,但是有一个疑问,就是页面公用的导航栏,怎么实现点击跳转后当前栏目变色呢?
请求各位老司机提供一下思路,可能是新手,还没转换过来思维,麻烦解答。谢谢各位!
PHP中文网2017-04-17 15:50:55
例如我用的EJS模版:
<a href="/index" class="title <%= activeNav("/index") %>">最新折扣</span>
在class中调用方法,传入链接地址,目的是给当前class加上自定义的选中效果,例如active
app.js中:
var common = require('./common');
app.use(common.activeUrl);
common.js中:
exports.activeUrl = function (req, res, next) {
res.locals.activeNav = function (nav) {
let result = '';
let _path = req.path;
if (nav == _path) {
result = 'main-active';
} else {
result = '';
}
return result;
};
next();
};
黄舟2017-04-17 15:50:55
可以用css类解决,在css里创建current类
.current{
background-color:#0000FF;
color:#FFFFFF
}
点击跳转后给要变色的栏目设置类名为current
阿神2017-04-17 15:50:55
提供一个思路哈。你可以给用用导航栏的初始化函数传递一个参数,让这个参数去区分其他菜单。给那个菜单实现变色
nav.init(curNavName){
//对name或者id或者自定义属性值为curNavName的菜单进行变色操作。
}
//页面发生跳转的时候,你传递相关参数给nav.init()函数
怪我咯2017-04-17 15:50:55
我也想到传参来设置CSS,不过从没看见过那个类似功能的网站URL上是带这个参数的。
或许可以用COOKIE,点击某个导航连接的时候设置COOKIE的值为该栏目,导航栏当前栏目链接高亮根据这个值来显示。
感觉还是不太优雅虽然能解决,坐等其它方法。