問題描述

最近在學習nodejs制作一個簡單的個人網站，模版用的ejs，但是有一個疑問，就是頁面公用的導航欄，怎么實現(xiàn)點擊跳轉后當前欄目變色呢？請求各位老司機提供一下思路，可能是新手，還沒轉換過來思維，麻煩解答。謝謝各位！

問題解答

例如我用的EJS模版：

<a href='http://m.lshqa.cn/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里創(chuàng)建current類

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

點擊跳轉后給要變色的欄目設置類名為current

提供一個思路哈。你可以給用用導航欄的初始化函數(shù)傳遞一個參數(shù)，讓這個參數(shù)去區(qū)分其他菜單。給那個菜單實現(xiàn)變色

nav.init(curNavName){ //對name或者id或者自定義屬性值為curNavName的菜單進行變色操作。}//頁面發(fā)生跳轉的時候，你傳遞相關參數(shù)給nav.init()函數(shù)回答4：

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

或許可以用COOKIE，點擊某個導航連接的時候設置COOKIE的值為該欄目，導航欄當前欄目鏈接高亮根據這個值來顯示。

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

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