2017/07

講解版的導(dǎo)航高亮（新手福利）原生JS

發(fā)布時(shí)間：2017-07-01 13:58:09

發(fā)布者：pengyifeng

瀏覽量:

為了增加用戶體驗(yàn)度，增加網(wǎng)頁的易用性和美觀度，往往需要把當(dāng)前導(dǎo)航菜單以特殊方式顯示，通常是高亮顯示或有不同于其它菜單的背景，有兩種方法可以實(shí)現(xiàn)，第一種是用純css來實(shí)現(xiàn)，二是用js輔助css來實(shí)現(xiàn)，兩個(gè)種方法都比較簡單，相對而言js更簡單些，下面介紹用js來實(shí)現(xiàn)的方法：

這是導(dǎo)航的樣式

HTML：


    主頁1

    
主頁2

    
主頁3

    
主頁4

當(dāng)前導(dǎo)航高亮顯示能夠提升用戶體驗(yàn)，因?yàn)樵诰W(wǎng)站中每個(gè)頂級導(dǎo)航欄對應(yīng)不同的頁面，那么我們?nèi)绾巫屗趯?yīng)的頁面時(shí)，對應(yīng)的li高亮呢？下面我們用js代碼寫下操作。

JS代碼：



var nav = document.getElementById("navs");
var links = nav.getElementsByTagName("li");
var lilen = nav.getElementsByTagName("a");
var currenturl = document.location.href;
var last = 0;
for (var i=0;i

演示地址：http://www.mingdewrap.com/d/demo/dh/1.html

上一篇：站內(nèi)優(yōu)化中的內(nèi)鏈在網(wǎng)站建設(shè)中扮演什么角色？

下一篇： php中的命名空間

關(guān)鍵詞:

返回列表

相關(guān)文章

2025-07-25

MySQL查詢賬號資源占用情況查看詳情

2025-07-25

python拆分多行文本漢字轉(zhuǎn)為字段存入數(shù)據(jù)庫查看詳情

2025-07-25

商家如何通過預(yù)約服務(wù)系統(tǒng)保證并提高服務(wù)質(zhì)量查看詳情