鍍金池/ 問答/HTML5  網(wǎng)絡(luò)安全  HTML/ angularjs路由 點(diǎn)擊導(dǎo)航時(shí)怎么讓導(dǎo)航處于選中高亮狀態(tài)?先謝謝各位了

angularjs路由 點(diǎn)擊導(dǎo)航時(shí)怎么讓導(dǎo)航處于選中高亮狀態(tài)?先謝謝各位了

圖片描述

就以這個(gè)百度的為例,點(diǎn)擊“網(wǎng)頁”的時(shí)候下方有個(gè)下邊框,就是處于選中的高亮狀態(tài)的效果。在網(wǎng)上找了許多例子也做不好,我有點(diǎn)愚笨,所以希望大家說說吧…………

回答
編輯回答
有點(diǎn)壞

(1)你在切換導(dǎo)航的時(shí)候給個(gè)類型區(qū)別,你可以在url添加一個(gè)錨點(diǎn),例如http://localhost:8086/topic/index?nav=XXX.(XXX就是點(diǎn)擊nav名字)
(2)

<ul>
    <li data-type=“wangye”>網(wǎng)頁</li>
    <li data-type=“xinwen”>新聞</li>
    <li data-type=“tieba”>貼吧</li>
</ul>

(3)用jquery或者js或者angularjs里自帶的路由獲取url里的XXX,讓li里的data-type值與XXX相等的添加高亮狀態(tài)。當(dāng)然你也可以不用data-type,用id也可以。例如:

<ul>
    <li id=“wangye”>網(wǎng)頁</li>
    <li id=“xinwen”>新聞</li>
    <li id=“tieba”>貼吧</li>
</ul>

$(XXX).addClass(高亮class);把XXX當(dāng)id即可;
(4)好處:頁面刷新,選中的高亮狀態(tài)也不會(huì)消失,到達(dá)預(yù)期效果。 壞處:代碼不夠優(yōu)美,有待優(yōu)化與改善

2017年6月6日 14:51
編輯回答
夏木

雖然已解決了 但是謝謝老哥

2017年6月28日 12:50