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

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

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()函数

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.

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