html - 请问用Nodejs怎么制作导航点击变色功能？

问题描述

最近在学习nodejs制作一个简单的个人网站，模版用的ejs，但是有一个疑问，就是页面公用的导航栏，怎么实现点击跳转后当前栏目变色呢？请求各位老司机提供一下思路，可能是新手，还没转换过来思维，麻烦解答。谢谢各位！

问题解答

例如我用的EJS模版：

<a href='https://www.haobala.com/index' /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();};回答2：

可以用css类解决，在css里创建current类

.current{ background-color:#0000FF; color:#FFFFFF}

点击跳转后给要变色的栏目设置类名为current

提供一个思路哈。你可以给用用导航栏的初始化函数传递一个参数，让这个参数去区分其他菜单。给那个菜单实现变色

nav.init(curNavName){ //对name或者id或者自定义属性值为curNavName的菜单进行变色操作。}//页面发生跳转的时候，你传递相关参数给nav.init()函数回答4：

我也想到传参来设置CSS，不过从没看见过那个类似功能的网站URL上是带这个参数的。

或许可以用COOKIE，点击某个导航连接的时候设置COOKIE的值为该栏目，导航栏当前栏目链接高亮根据这个值来显示。

感觉还是不太优雅虽然能解决，坐等其它方法。

这叫面包屑功能，antd有类似组件 https://ant.design/components...