jQuery脚本不会添加活动类答案

【问题标题】：jQuery script wont add active classjQuery脚本不会添加活动类
【发布时间】：2015-10-07 20:32:16
【问题描述】：

我得到了这个 jQuery 脚本，它应该将“活动”类添加到我的 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 上使用它（在主导航下方的子导航中）。

提前致谢！

【问题讨论】：

你确定href属性和location对象有相似的url，通常href标签不包含域名（相对路径）
首先，检查 if 条件是否会被执行。在调试中检查或向 if 条件添加警报以确保代码 jQuery(this).parent().addClass("active");被执行

标签： javascript jquery navigation

【解决方案1】：

您可以直接使用 jquery 通过其 href 属性选择它，而不是循环所有链接：

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

请注意，location.href 将返回完整的 url，包括主机和方案，如果您在网站中使用相对 url：

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

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

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

【讨论】：

这里的正则表达式不合法吗？网址可能包含搜索路径 (/link?q=test)。无论如何，你已经得到了我的 +1，
谢谢！我想正则表达式也可以，但这不是我的强项:)
@taxicala - 感谢您的回复！我刚刚尝试使用您的脚本，但出现错误：无法识别的表达式：a[href=xn--fnpark-pua9l.dk/konference-ny/]
对不起，我忘记了一些引号，我已经更新了我的答案。
@taxicala - 非常感谢！它就像一个魅力！我将使用它而不是我自己的脚本 :)

【解决方案2】：

这些链接中的任何一个都没有完全匹配。 pgurl 显示 http://xn--fnpark-pua9l.dk/konference-ny/，但 <a> 标记没有尾部斜杠 (http://xn--fnpark-pua9l.dk/konference-ny)。在比较字符串之前尝试清理 url。这里有一个线程可以让你这样做：https://stackoverflow.com/a/2541083/5169684

【讨论】：

有道理！非常感谢您的回复！我会把这个标记为正确的，因为这就是它不起作用的原因:)
很高兴能帮上忙。我建议您也查看其他一些答案。从长远来看，所提到的方法可能会使您的代码更具可读性。
我将使用taxicala建议的方法。比我自己的代码更干净，更好！ :)

【解决方案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/

【讨论】：