2017/07

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

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

發(fā)布者：pengyifeng

瀏覽量:

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

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

HTML：


    主頁(yè)1

    
主頁(yè)2

    
主頁(yè)3

    
主頁(yè)4

當(dāng)前導(dǎo)航高亮顯示能夠提升用戶體驗(yàn)，因?yàn)樵诰W(wǎng)站中每個(gè)頂級(jí)導(dǎo)航欄對(duì)應(yīng)不同的頁(yè)面，那么我們?nèi)绾巫屗趯?duì)應(yīng)的頁(yè)面時(shí)，對(duì)應(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.hi7788.com/d/demo/dh/1.html

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

下一篇： php中的命名空間

關(guān)鍵詞:

返回列表

相關(guān)文章

2024-03-17

很多人都知道的三個(gè)Python編碼常用小技巧查看詳情

2022-04-18

網(wǎng)站關(guān)鍵詞優(yōu)化百度排名提高SEO外包推廣計(jì)劃查看詳情

2022-04-15

網(wǎng)站代碼優(yōu)化的內(nèi)容有哪些? 查看詳情