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

Question

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

Answer 1

For example, the EJS template I use:

<a href="/index" class="title <%= activeNav("/index") %>">最新折扣</span>

Call the method in the class and pass in the link address. The purpose is to add a custom selection effect to the current class, such as active

app.js in:

var common = require('./common');
app.use(common.activeUrl);

common.js in:

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();
};

Answer 2

Can be solved with css class, create current class in css

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

Click to jump and set the class name of the column to be changed to current

Answer 3

Give me an idea. You can pass a parameter to the initialization function of the navigation bar and let this parameter distinguish other menus. Change color for that menu

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

Answer 4

I also thought of passing parameters to set CSS, but I have never seen a website URL with similar functions with this parameter.

Perhaps you can use COOKIE. When you click on a navigation link, set the COOKIE value to the column. The current column link in the navigation bar will be highlighted based on this value.

It still doesn’t feel very elegant, although it can be solved, just wait for other methods.

Answer 5

This is called the breadcrumb function, antd has similar components https://ant.design/components...