Question

我的主导航中有这个HTML：

<div id="navigation">  
  <ul>
     <li>
       <a href="/contact">contact us</a>
     </li>
   <li>
      <a href="/projects">projects</a>       
   </li>
  </ul>
 </div>

我想标记活动链接，所以我使用这个jquery：

$("div#navigation").find("a[href='" + top.location.pathname + "']").each(function ()
 {
   $(this).addClass("active")
 })

虽然它适用于URL，例如domain.com/projects或domain.com/contacts，
我对深层网址有疑问，例如domain.com/projects/proj-1 我希望当我转到更深的URL时，它会将父URL标记为活动（domain.com/projects）。我怎么能这样做？

谢谢！

Answer 1

首先，在您的示例中，您不必使用.each()方法，因为您可以直接指定类这样的

$("div#navigation").find("a[href='" + top.location.pathname + "']").addClass("active")

对于问题使用

$("div#navigation").find("a").filter(function(){
    var href =  $(this).attr('href');
    return href!='/' && href !='#' && top.location.pathname.indexOf( href )==0 ;
}).addClass("active");

修改：做了一些小改动以迎合评论问题

Answer 2

您可以使用jquery的closest运算符向上走树并标记所有父lis。喜欢这个

$(this).closest("li","#navigation").addClass("active");

最近的工作比父母更好，因为您可以将搜索限制在菜单的上下文中。

另外，另外，您不需要循环。你可以这样做：

$("div#navigation").find("a[href='" + top.location.pathname + "']").addClass("active");

所以你的整个代码应该是这样的：

$selected = $("div#navigation").find("a[href='" + top.location.pathname + "']");
$selected.addClass("active");
$selected.closest("li","#navigation").addClass("active");

jQuery父级的“主动”类分配

2 个答案: