jQuery的一個更好的主意，活動類添加到菜單項

Question

這個簡單的腳本將「活動」類中的鏈接列表時，頁面的URL是=鏈接的href屬性

var TheP = window.location.pathname.split('/'); 
var HeRe = TheP[TheP.length-1]; 
$('ul a').each(function(){ 
var Link = $(this).attr('href'); 
     if (Link == HeRe){ $(this).addClass('active');} 
}); 

和它的作品。但是...只有當屬性只是一個文件href="index.html"時。不會在今後的案件或類似在所有工作：

<a href="foo/index.html">foo</a> 
<a href="../bar/index.html">bar</a> 

其實要解決它，我可以這樣寫：

var TheP = window.location.pathname.split('/'); 
var P1 = TheP[TheP.length-1]; 
var P2 = TheP[TheP.length-2]; 
var HeRe = P2+"/"+P1; 

$('ul a').each(function(){ 
    var Ln = $(this).attr('href'); 
    var Ln = Ln.split('/'); 
    var L1 = Ln[Ln.length-1]; 
    var L2 = Ln[Ln.length-2]; 
    var Link = L2+"/"+L1; 
     if (Link == HeRe){$(this).addClass('active');} 
}); 

但是...... EHM ......我覺得應該有一個更好的更靈活的方式。 （

Answer 1

更新：同樣的原因是什麼上面並沒有一個單一的文件作爲路徑工作。我誤解了這個問題本來重新閱讀它，它聽起來就像你要確保不匹配。所有index.html S，但只有特定的一個你是（這使得相當多的意義，實際上）

在這種情況下，你可以這樣做：

var path = window.location.href; // Just grabbing a handy reference to it 
$('ul a').each(function() { 
    if (this.href === path) { 
     $(this).addClass('active'); 
    } 
}); 

...因爲href財產（這是不是與「href」屬性相同）DOM元素is the absolute path。

Live example

很明顯，你可以做限制，最初的選擇（合理的）越多，效果越好。例如，如果這全部在一些導航結構內，那麼只有在該結構內工作纔會更有效率。

此外，是否會有一個很多比賽，你能避免做添加類時jQuery的包裝，如果你喜歡：

if (this.href === path) { 
     this.className += " active"; // note the space 
    } 

---

原來的答覆：

如果href屬性在文件名部分之前始終有/，那麼：

var TheP = window.location.pathname.split('/'); 
var HeRe = TheP[TheP.length-1]; 
$('ul a[href$="/' + HeRe + '"]').addClass('active'); 

使用attribute ends-with selector來查找相關鏈接。

如果href屬性有時可能只是index.html或類似的，你可以這樣做：

var TheP = window.location.pathname.split('/'); 
var HeRe = TheP[TheP.length-1]; 
$('ul a[href$="/' + HeRe + '"], ul a[href="' + HeRe + '"]').addClass('active'); 

...這將趕上那些與/使用它們前面的「結束，以」選擇，還有那些使用「等號」選擇符完全匹配的地方。

Answer 2

而不是打破路徑名稱爲什麼你不只是比較整個事情。如果你有相關的網址，它應該很容易。此外，您可以執行替換來處理絕對網址。

var mainpart = window.location.protocol + "//" + window.location.host; 
var path = '/' + window.location.pathname; 
$('ul a').each(function(){ 
    var Link = $(this).attr('href').replace(mainpart, ''); 
    if (Link === path || '/' + Link === path){ $(this).addClass('active');} 
}); 

Answer 3

var TheP = window.location.pathname.split('/'); 
var HeRe = TheP[TheP.length-1]; 
$('ul a[href$="' + HeRe + '"]').addClass('active'); 

根據規範http://www.w3.org/TR/css3-selectors/#attribute-substrings：

提供了用於在一個屬性的值匹配的子三個附加屬性選擇：

• [ATT^= VAL]三個代表具有 att屬性的元素，其值開始於 ，前綴爲「val」。如果「val」是 空字符串，則選擇器 不表示任何內容。
• [att $ = val]表示具有 att屬性的元素，其值爲結尾 ，後綴爲「val」。如果「val」是 空字符串，則選擇器 不表示任何內容。
• [ATT * = VAL]代表與 內的att屬性，其值 包含 串 「VAL」 的至少一個實例的元件。如果「val」是 空字符串，則選擇器 不表示任何內容。