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

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

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

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

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

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

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

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

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

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的。

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

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

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

您可能感興趣的文章: