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();
};
例如我用的EJS模版:
在class中调用方法,传入链接地址,目的是给当前class加上自定义的选中效果,例如active
app.js中:
common.js中:
可以用css类解决,在css里创建current类
点击跳转后给要变色的栏目设置类名为current
提供一个思路哈。你可以给用用导航栏的初始化函数传递一个参数,让这个参数去区分其他菜单。给那个菜单实现变色
我也想到传参来设置CSS,不过从没看见过那个类似功能的网站URL上是带这个参数的。
或许可以用COOKIE,点击某个导航连接的时候设置COOKIE的值为该栏目,导航栏当前栏目链接高亮根据这个值来显示。
感觉还是不太优雅虽然能解决,坐等其它方法。
这叫面包屑功能,antd有类似组件 https://ant.design/components...