快捷導(dǎo)航

jQuery實(shí)現(xiàn)導(dǎo)航高亮的方法【附demo源碼下載】

更新時(shí)間：2016年11月09日 10:01:51 作者：aqy106

這篇文章主要介紹了jQuery實(shí)現(xiàn)導(dǎo)航高亮的方法,涉及針對(duì)鼠標(biāo)事件的相應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)變換的相關(guān)操作技巧,并附帶demo源碼供讀者下載,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)導(dǎo)航高亮的方法。分享給大家供大家參考，具體如下：

導(dǎo)航是我們頁(yè)面中一般都需要的一個(gè)元素，它可以說(shuō)是一個(gè)站點(diǎn)必用的元素，沒(méi)有了導(dǎo)航，會(huì)讓人找不著北，但有時(shí)候，僅僅有了導(dǎo)航還不夠，還需要在當(dāng)前的頁(yè)面中標(biāo)明當(dāng)前是在哪一個(gè)類別里面，這時(shí)候就有了不同的實(shí)現(xiàn)的方法，也就有了下文的一些介紹。

通常，我們?cè)谧鰧?dǎo)航的時(shí)候，都是由程序直接輸出當(dāng)前的頁(yè)面的的高亮狀態(tài)的樣式，我們只需要定義好輸出的類的高亮的樣式就可以了，這樣是最直接有效也是最常用的方法。

像Wordpress的導(dǎo)航輸出，會(huì)自動(dòng)輸出一個(gè)高亮的類的“current”，如下圖：

但有時(shí)候，我們?cè)诔绦蚶镞M(jìn)行包含的文件的時(shí)候，如統(tǒng)一的頭部和底部，這時(shí)候統(tǒng)一的頭部中有一個(gè)這樣的導(dǎo)航，如果粗心的程序員沒(méi)有無(wú)法給目前所在的目錄或文件輸出一個(gè)高亮的類的時(shí)候，或者有時(shí)候?qū)崿F(xiàn)起來(lái)非常麻煩的時(shí)候，能不能有一些其實(shí)的方法來(lái)實(shí)現(xiàn)和補(bǔ)救呢？

答案是肯定的，那就是JS。

但這個(gè)根據(jù)怎樣的規(guī)則給當(dāng)前的這個(gè)目錄或文件實(shí)現(xiàn)高亮呢？

最近剛好也在項(xiàng)目中遇到這個(gè)問(wèn)題，所以通過(guò)一番的折騰，實(shí)現(xiàn)了效果。

我的思路是這樣的，先找到當(dāng)前的URL的路徑，然后URL中的最后的一個(gè)文件名或目錄和導(dǎo)航中元素的某個(gè)屬性來(lái)進(jìn)行匹配，匹配成功的就加上高亮的類，把別的不是當(dāng)前匹配的類的高亮樣式去掉，不成功的時(shí)候就返回到首頁(yè)這個(gè)來(lái)進(jìn)行高亮。

于是就有了下面的代碼，經(jīng)試驗(yàn)，無(wú)論是文件或是目錄都可匹配成功：

THML：

<ul class="menu" id="menu">
 <li><a title="首頁(yè)" href="index.html" rel="index.html">首頁(yè)</a></li>
 <li ><a title="作品集" href="works.html" rel="works.html">作品集</a></li>
 <li><a title="前端庫(kù)" href="web.html" rel="web.html">前端庫(kù)</a></li>
</ul>

js代碼：

<script type="text/javascript">
 var urlstr = location.href;
 var urlstatus=false;
 $("#menu a").each(function () {
 if ((urlstr + '/').indexOf($(this).attr('rel')) > -1&&$(this).attr('rel')!='') {
  $(this).addClass('cur'); urlstatus = true;
 } else {
  $(this).removeClass('cur');
 }
 });
 if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }
</script>

不要忘了，該腳本是基于Jquery的。

完整實(shí)例代碼點(diǎn)擊此處本站下載。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery窗口操作技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: