jquery導航突出顯示

嗨我想在Jquery中編寫一個腳本，自動選擇主導航欄中的當前頁面鏈接。該導航只是一個簡單的UL這樣的：jquery導航突出顯示

<ul id="primaryNav"> 
    <li> 
     <a href="retail.html">Home</a> 
    </li> 
    <li> 
     <a href="vision.html">Our Vision</a> 
    </li> 
    <li> 
     <a href="context.html">Town in context</a> 
    </li> 
</ul>

我的Jquery到目前爲止是這樣的：

$('#primaryNav').find("a[href='"+window.location.href+"']").each(function(){ 
    $(this).addClass("selected"); 
});

這不工作，因爲我覺得它的選擇對整個URL，而我只需要它選擇最後一部分，例如retail.html或vision.html，然後添加類.selected

任何人都可以請幫忙嗎？提前致謝。

來源

2010-10-08 mtwallet

使用attribute ends-with selector是不是這裏安全（的$=代替=），像這樣：

$('#primaryNav').find("a[href$='"+window.location.href.split('/').pop()+"']") 
       .addClass("selected");

也沒必要爲.each()這裏，只是打電話.addClass()將它添加到所有匹配的元素（即使你的例子應該有一個）。

來源

2010-10-08 11:17:41

感謝您的答覆尼克。我修正了這個問題，但無法正常工作。一個例子可以在這裏找到http://www.northlight-studios.co.uk/dev/standardLife/retail/retail.html我在這裏錯過了一些明顯的東西嗎？ – mtwallet 2010-10-08 11:30:53

@mtwallet - 在那裏有一個大腦失效，添加了流行版本......它是以定位符的「href」結尾的'location.href' ......而不是其他方式。 – 2010-10-08 11:34:42

感謝您的幫助。任何機會，你可以運行我如何工作，並比較其他例子在這裏，所以我可以從這個瞭解一點？ – mtwallet 2010-10-08 11:38:06

怎麼樣一個簡單的子字符串？

var href = window.location.href; 
var htmlPageName = href.substring(href.lastIndexOf('/') + 1); 

$('#primaryNav').find("a[href='" + htmlPageName +"']").each(function(){ 
    $(this).addClass("selected"); 
});

來源

2010-10-08 11:17:45

再次感謝您的工作得很好。有什麼機會可以解釋這是如何工作的，並與@Arnaud F例子進行比較，這樣我可以從中學到一些東西？ – mtwallet 2010-10-08 11:36:13

Sure-'href.lastIndexOf（'/'）+ 1'只是獲得最後一次出現的索引（加1，所以我們將斜槓移到_past_）。將該索引作爲起始索引傳遞給'href.substring（）'，將從url字符串（'href'）返回最後一個段（頁面名稱）。 – 2010-10-08 12:28:49

就像那個（立足於網頁名稱太）：

$('#primaryNav').find("a[href$='" + window.location.href.split("/").reverse()[0] + "']").addClass("selected");

來源

2010-10-08 11:27:30

非常感謝！你能解釋一下你在那裏做了什麼嗎？ – mtwallet 2010-10-08 11:33:18

'window.location.href.split（「/」）。reverse（）[0]'或'pop（）'而不是'.reverse（）[0]'分割當前位置和數組的最後一個元素是頁面名稱。一旦我們有頁面名稱，使用選擇器$ =來找到你想要的鏈接。更多細節，請參閱選擇器$ =的jQuery API – 2010-10-08 11:38:38

jquery導航突出顯示

回答

相關問題