問(wèn)題描述

最近在學(xué)習(xí)nodejs制作一個(gè)簡(jiǎn)單的個(gè)人網(wǎng)站，模版用的ejs，但是有一個(gè)疑問(wèn)，就是頁(yè)面公用的導(dǎo)航欄，怎么實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)后當(dāng)前欄目變色呢？請(qǐng)求各位老司機(jī)提供一下思路，可能是新手，還沒(méi)轉(zhuǎn)換過(guò)來(lái)思維，麻煩解答。謝謝各位！

問(wèn)題解答

例如我用的EJS模版：

<a href='http://www.intensediesel.com/index' /index') %>'>最新折扣</span>

在class中調(diào)用方法，傳入鏈接地址，目的是給當(dāng)前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}

點(diǎn)擊跳轉(zhuǎn)后給要變色的欄目設(shè)置類名為current

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

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

我也想到傳參來(lái)設(shè)置CSS，不過(guò)從沒(méi)看見(jiàn)過(guò)那個(gè)類似功能的網(wǎng)站URL上是帶這個(gè)參數(shù)的。

或許可以用COOKIE，點(diǎn)擊某個(gè)導(dǎo)航連接的時(shí)候設(shè)置COOKIE的值為該欄目，導(dǎo)航欄當(dāng)前欄目鏈接高亮根據(jù)這個(gè)值來(lái)顯示。

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

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