本文實例講述了jQuery實現導航高亮的方法。分享給大家供大家參考，具體如下：

導航是我們頁面中一般都需要的一個元素，它可以說是一個站點必用的元素，沒有了導航，會讓人找不著北，但有時候，僅僅有了導航還不夠，還需要在當前的頁面中標明當前是在哪一個類別里面，這時候就有了不同的實現的方法，也就有了下文的一些介紹。

通常，我們在做導航的時候，都是由程序直接輸出當前的頁面的的高亮狀態的樣式，我們只需要定義好輸出的類的高亮的樣式就可以了，這樣是最直接有效也是最常用的方法。

像Wordpress的導航輸出，會自動輸出一個高亮的類的“current”，如下圖：

但有時候，我們在程序里進行包含的文件的時候，如統一的頭部和底部，這時候統一的頭部中有一個這樣的導航，如果粗心的程序員沒有無法給目前所在的目錄或文件輸出一個高亮的類的時候，或者有時候實現起來非常麻煩的時候，能不能有一些其實的方法來實現和補救呢？

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

但這個根據怎樣的規則給當前的這個目錄或文件實現高亮呢？

最近剛好也在項目中遇到這個問題，所以通過一番的折騰，實現了效果。

我的思路是這樣的，先找到當前的URL的路徑，然后URL中的最后的一個文件名或目錄和導航中元素的某個屬性來進行匹配，匹配成功的就加上高亮的類，把別的不是當前匹配的類的高亮樣式去掉，不成功的時候就返回到首頁這個來進行高亮。

于是就有了下面的代碼，經試驗，無論是文件或是目錄都可匹配成功：

THML：

<ul class="menu" id="menu"> <li><a title="首頁" href="index.html" rel="index.html">首頁</a></li> <li ><a title="作品集" href="works.html" rel="works.html">作品集</a></li> <li><a title="前端庫" href="web.html" rel="web.html">前端庫</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的。

完整實例代碼點擊此處本站下載。

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

希望本文所述對大家jQuery程序設計有所幫助。