jQuery： <a>使用當前頁面href</a>將Active類添加到

Question

我正在尋找一種將活動類添加到具有當前頁面的href的標記中的方法。

說我在localhost：3000 / inbox頁面上，我需要我的html更改以將正確的類添加到正確的類中，這些類全部位於帶有側邊欄的div中。

因此，當在“ /收件箱”時，jQuery應該使我的html看起來像這樣：

<div class="sidebar">
<a href="/link">
  <i class="fa fa-inbox"></i>
  <span>A Link</span>
</a>
<a class="active" href="/inbox">
  <i class="fa fa-inbox"></i>
  <span>Inbox</span>
</a>
</div>

這是我嘗試過的方法，但是不起作用，它破壞了代碼：

var href = $(location).attr('href');
  ('.sidebar').find('a[href*=href]').addClass("active");

謝謝。 如果我不夠清楚，請告訴我。

Answer 1

看起來您幾乎做對了，有一個小錯誤，就是忘記了調用jQuery或$ 。 您還需要串聯選擇器，以便搜索href的值 。

$('.sidebar').find('a[href*="' + href + '"]').addClass('active');

您可能還需要找到僅路徑名以匹配您的href值，如下所示：

var href = window.location.pathname;

Answer 2

這個怎么樣？

var path = window.location.pathname;
$(".sidebar a[href*='"+path+"']").addClass("active");

請注意路徑周圍的' 。 它們之所以存在，是因為如果選擇器中未加引號/ ，則jQuery會導致語法錯誤。

當我在JSFiddle上嘗試時，在路徑的末尾出現/ 。 您可能希望將其添加到鏈接中，或者可以將其從path變量中刪除，如下所示：

if(path.charAt(path.length-1) == "/")
    path = path.substring(0, path.length - 1);

然后某些瀏覽器可能不包括前導/ （或至少我認為是這樣），因此，如果它尚不存在，您可能需要添加它：

if(path.charAt(0) != "/")
    path = "/" + path;

由於您使用*= ，因此可能比當前頁面更多。 例如，如果您在/inbox/ ，則還將類添加到/inbox/sub/folder鏈接中。 為避免這種情況，請改用= 。

綜上所述，您將獲得以下信息：

var path = window.location.pathname;
if(path.charAt(path.length-1) == "/")
    path = path.substring(0, path.length - 1);
if(path.charAt(0) != "/")
    path = "/" + path;
$(".sidebar a[href='"+path+"']").addClass("active");

這是一個工作中的JSFiddle。 （您可能需要按run才能使它起作用，因為第一次加載頁面時URL不同。）

Answer 3

據我了解您的問題，您想將所有href為'/ inbox'的div更改為“ active”類

因此，您的代碼應如下所示

$(document).ready(function(){

     $(.sidebar a[href=='/inbox']){

         $(a[href=='/inbox').addClass('active');

     }

}