基於URL

主動導航

我的導航菜單看起來像這樣基於URL

<div id="menu-div"> 
<ul> 
<li><a href="localhost/admin/">Admin</a></li> 
<li><a href="localhost/admin/page/">Pages</a></li> 
<li><a href="localhost/admin/image/">Gallery</a></li> 
<li><a href="localhost/admin/account/">Accounts</a></li> 
<li><a href="localhost/admin/role">Roles</a></li> 
<li><a href="localhost/admin/theme">Layout</a></li> 
<li><a href="localhost/admin/backup">Backup</a></li> 
</ul> 
</div>

我想主動類添加到基於URL的導航鏈接。我嘗試了以下jQuery功能

$(function() { 
    $('#menu-div a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); 
     });

此函數將所有鏈接設置爲活動而不是僅當前活動。 jQuery函數一定有問題。我對它不太滿意。任何幫助將非常感激。謝謝。

來源

2015-01-07 Bidhan A

您可以簡單地使用location.pathname與jQuery的選擇的endsWith [ attr $=""] ，您可以使用它來搜索字符串中的子字符串。在這種情況下，您正在嘗試查找指定的路徑。這總比包含可以匹配像

/管理 /管理/ foobar的 /foobar的/管理員

將全部匹配/管理

但等待

該解決方案類似的路徑太簡單了。我們需要確保路徑與所提供的href完全匹配！

$(function() { 
    (function(){ 
     var path = location.pathname; 
     $('#menu-div * a[href$="'+ path+'"]').each(function(index,element){ 
      var href = $(this).attr('href'); 
      if(href.indexOf('http://') !== -1){ 
       var exact = href.substring(7,href.length).split('/'); 
      }else{ 
       var exact = href.split('/'); 
      } 
      exact[0] = '';//get rid of the host 
      exact = exact.join('/'); 
      if(path == exact){ 
       $(this).addClass('active'); 
      } 
     }); 
    })(); 
});

fiddle（請注意，你必須點擊運行，因爲jsfiddle.net使用JavaScript別名的實際路徑。

來源

2015-01-07 04:11:03 r3wt

謝謝你讓我很快樂。 –

@BidhanA請稍候，我將改進代碼，它可能會錯誤地匹配其他路徑 – r3wt

@BidhanA更新了一個更正確的答案，應該防止類似名稱中的路徑結尾，以及相對的href，例如'/路徑/到/頁面'與出HTTP和主機名稱。 – r3wt

的JQuery的onLoad：

function() { 
var whereAmI = window.location.pathname; 
    switch(whereAmI){ 
    case "www.yourwebsite.com": 
     /*do what you want*/ 
     break; 
}  
}();

來源

2015-01-07 03:50:53 ZenStein

有點哈克，但它會奏效。 – ZenStein

我不知道你是有工作，所以我會做出一個了一個例子的完整路徑。比方說，你的路徑是：

file:///Users/yourname/Desktop/test.html

當你撥打：

location.pathname.split("/")

你得到一個數組，看起來像這樣：

["", "Users", "yourname", "Desktop", "test.html"]

然後當你調用[1]該數組你上第二個結果（索引從0開始），在這種情況下是：

Users

這不是你想要的。你正在尋找這樣的路徑：localhost/admin/。所以，這取決於你的路徑實際上是，你可能會尋找：

window.location.pathname

或整個路徑減去協議：

window.location.hostname + window.location.pathname

來源

2015-01-07 03:52:33 jmore009

回答

相關問題