jQuery 脚本不会添加活动 class

Question

我得到了这个 jQuery 脚本，它应该将 class "active" 添加到我的 li 中，但它没有。脚本如下：

jQuery(function() {
 var pgurl = jQuery(location).attr('href');
 console.log(pgurl);
 jQuery("ul.pagesubmenu-ul li a").each(function(){
      if(jQuery(this).attr("href") == pgurl)
      jQuery(this).parent().addClass("active");
 })

});

我真的不知道为什么它不起作用。我正在尝试在 this page 上使用它（在主导航下方的子导航中）。

提前致谢！

Answer 1

无需循环所有链接，您可以通过其 href 属性直接将其 jquery jquery select：

$(function() {
    $("a[href='" + location.href + "']").parent().addClass('active');
});

请注意，location.href 将 return 完整的 url，如果您在站点中使用相对 urls：

]

$(function() {
    $("a[href='" + location.pathname + "']").parent().addClass('active');
});

此外，您可以使用一些字符作为通配符：

= is exactly equal
!= not equal
^= starts with
$= ends with
*= contains
~= contains word
|= starts with prefix

Answer 2

它没有在任何这些链接上获得完全匹配。 pgurl 显示 http://xn--fnpark-pua9l.dk/konference-ny/，但是 <a> 标签没有尾部斜杠 (http://xn--fnpark-pua9l.dk/konference-ny)。在比较字符串之前尝试清理 url。这是一个线程，可以让你这样做：

Answer 3

为什么不工作？你能用你的导航结构做一个jsfiddle吗...

HTML

<ul class="page"> <li><a href="1">Link</a> <ul class="subpage"> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link</a></li> </ul> </li> <li><a href="2">Link</a></li> <li><a href="3">Link</a></li> <li><a href="4">Link</a></li> <li><a href="5">Link</a></li> </ul>

JQUERY

jQuery(function() { $("ul.page li ul.subpage li a").each(function(){ $(this).addClass('active'); }); });

https://jsfiddle.net/xp315ydq/

jQuery 脚本不会添加活动 class

jQuery script wont add active class

javascript

navigation

jquery