向包含當前頁面的菜單鏈接的li添加類

Question

我有下面的菜單，我想將類active添加到<li>，其中包含用戶當前正在查看的頁面的鏈接。

<ul class="sidebar-menu"> 
<li class="treeview"><a href="#"><i class="fa fa-dashboard"></i> <span>Text</span></a></li> 
<li class="treeview"><a href="#"><i class="fa fa-th"></i><span>Subtext 1</span><i class="fa fa-angle-left pull-right"></i></a>    
    <ul class=" treeview-menu"> 
     <li><a href="#"><i class="fa fa-circle-o"></i> Text 1</a></li>     
     <li><a href="#"><i class="fa fa-circle-o"></i> Text 2</a></li> 
    </ul> 
</li> 
</ul> 

我想這jQuery代碼，但它不爲我工作：

$(function(){ 

var url = window.location.pathname, 
    urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there 
    // now grab every link from the navigation 
    $('.treeview a').each(function(){ 
     // and test its normalized href against the url pathname regexp 
     if(urlRegExp.test(this.href.replace(/\/$/,''))){ 
      $(this).addClass('active treeview-menu'); 
     } 
    }); 

}); 

Answer 1

嘗試以下。它找到當前URL爲href的鏈接，找到它的父項，並將這些類應用到父元素。

$(document).ready(function() { 
    $('a[href="' + this.location.pathname + '"]').parent().addClass('active treeview-menu'); 
}); 

Answer 2

爲了使這項工作，我也做了一些改動你的代碼：

• ，而不是添加類的a的，我把它添加到li，爲您指定。
• 除了使用RegEx外，我還使用自定義函數刪除前導斜槓和尾部斜槓。 （不知道這是否必須這樣做，但它不能傷害。）
• 如果這是您想在選擇器中使用的類，則需要將類treeview添加到所有li中。
• 替代使用href屬性，我使用pathname屬性獲取鏈接的URL，因爲它需要與您在函數頂部的location.pathname相匹配。當然，你也可以與主機名進行比較，重點在於你需要將蘋果與蘋果進行比較而不是橙色。

$(function(){ 
    //Use the function removeSlash to clean up URL instead of using RegExp. 
    var url = removeSlash(window.location.pathname); 
    //Loop through the treeview elements (the li) instead of the a. 
    $('.treeview').each(function(){ 
     //Find the href of the a in the li. 
     var link = $(this).find('a')[0]; 
     //Use the link we just found instead of this. 
     //Also, instead of href, use pathname. That will give just the path, not the host. 
     if(url == removeSlash(link.pathname)) { 
      //This referes to the li, so we can keep this line of code as it is. 
      $(this).addClass('active'); 
     } 
    }); 
}); 

function removeSlash(url) { 
    //Remove leading slash, if there is one. 
    if(url.charAt(0) == '/') url = url.substring(1); 
    //Remove trailing slash, if there is one. 
    if(url.charAt(url.length-1) == '/') url = url.substring(0, url.length-1); 
    //Return the result. 
    return url; 
} 

工作JSFiddle。請注意，有很多情況下這可能不起作用。例如，我不確定當前的網址是http://example.com/site.php?x=4，鏈接的href是/site.php，會發生什麼情況。您應該可以通過修改removeSlash函數來實現處理這種情況的方法。