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

Question

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

Answer 1

例如我用的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();
};

Answer 2

可以用css類別解決，在css裡建立current類別

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

點擊跳轉後給要變色的欄位設定類別名為current

Answer 3

提供一個思路哈。你可以給用導覽列的初始化函數傳遞一個參數，讓這個參數去區分其他選單。給那個選單實現變色

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

Answer 4

我也想到傳參來設定CSS，不過從來沒看過那個類似功能的網站URL上是帶這個參數的。

或許可以用COOKIE，點選某個導覽連線的時候設定COOKIE的值為該欄位，導覽列目前欄位連結高亮根據這個值來顯示。

感覺還是不太優雅雖然能解決，坐等其它方法。

Answer 5

這叫麵包屑功能，antd有類似組件 https://ant.design/components...