html - 請(qǐng)問用Nodejs怎么制作導(dǎo)航點(diǎn)擊變色功能?
問題描述
最近在學(xué)習(xí)nodejs制作一個(gè)簡(jiǎn)單的個(gè)人網(wǎng)站,模版用的ejs,但是有一個(gè)疑問,就是頁面公用的導(dǎo)航欄,怎么實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)后當(dāng)前欄目變色呢?請(qǐng)求各位老司機(jī)提供一下思路,可能是新手,還沒轉(zhuǎn)換過來思維,麻煩解答。謝謝各位!
問題解答
回答1:例如我用的EJS模版:
<a href='http://m.b3g6.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
回答3:提供一個(gè)思路哈。你可以給用用導(dǎo)航欄的初始化函數(shù)傳遞一個(gè)參數(shù),讓這個(gè)參數(shù)去區(qū)分其他菜單。給那個(gè)菜單實(shí)現(xiàn)變色
nav.init(curNavName){ //對(duì)name或者id或者自定義屬性值為curNavName的菜單進(jìn)行變色操作。}//頁面發(fā)生跳轉(zhuǎn)的時(shí)候,你傳遞相關(guān)參數(shù)給nav.init()函數(shù)回答4:
我也想到傳參來設(shè)置CSS,不過從沒看見過那個(gè)類似功能的網(wǎng)站URL上是帶這個(gè)參數(shù)的。
或許可以用COOKIE,點(diǎn)擊某個(gè)導(dǎo)航連接的時(shí)候設(shè)置COOKIE的值為該欄目,導(dǎo)航欄當(dāng)前欄目鏈接高亮根據(jù)這個(gè)值來顯示。
感覺還是不太優(yōu)雅雖然能解決,坐等其它方法。
回答5:這叫面包屑功能,antd有類似組件 https://ant.design/components...
相關(guān)文章:
1. python小白 自學(xué)看書遇到看不懂的地方2. javascript - avalon.js ms-on 事件綁定無效 ?3. javascript - vue中使用prop傳遞數(shù)據(jù)問題4. javascript - 連續(xù)點(diǎn)擊觸發(fā)mouseleave事件5. php對(duì)mysql提取數(shù)據(jù)那種速度更快6. DADB.class.php文件的代碼怎么寫7. shell - mysql更新錯(cuò)誤8. javascript - immutable配合react提升性能?9. mysql - 在log日志中已知用戶的某一步操作,如何獲取其上一步操作?10. 網(wǎng)頁爬蟲 - 如何使用使用java抓取信息并制作一個(gè)排名系統(tǒng)?

網(wǎng)公網(wǎng)安備