使用 jQuery 添加 CSS 类答案

【问题标题】：Adding CSS Class using jQuery使用 jQuery 添加 CSS 类
【发布时间】：2019-03-01 22:59:43
【问题描述】：

下面我包含了我用来向等于活动 url 的侧列中的链接添加一个 css 类的 jquery 代码，但它不起作用，并且在某些时候它确实起作用了。

链接：http://www.liquidcomma.com/portfolio/project/TSF_Robot_Ad/1/

<script type="text/javascript">
$(document).ready(function(){
      $("ul.right_submenu > li > a").each(function() {
            if ($(this).attr("href") == location.href)
            {
                  $(this).addClass("CurrentProject");
            });
};
</script>

【问题讨论】：

我想问题出在这里：$(this).attr("href") == location.href - 其中一个 url 可能被规范化/解决了

标签： javascript jquery css

【解决方案1】：

好吧，除了缺少大括号和括号的代码之外，它还可以做得更简单：

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

【讨论】：

我已做出更改以解决 Miguel 的问题，选择器中的“^=”现在将仅匹配以当前位置 URL 开头的 href。
交换 ^= 与 $= .. 分别以开头和结尾。

【解决方案2】：

您的脚本中有未闭合的大括号：

$(document).ready(function(){
    $("ul.right_submenu > li > a").each(function() {
        var a = $(this);
        if (a.attr('href') == location.href) {
            a.addClass("CurrentProject");
        }
    });
});

你可以像这样重写你的脚本：

$('ul.right_submenu > li > a[href=' + location.href + ']')
    .addClass('CurrentProject');

【讨论】：

嗨，如果您访问liquidcomma.com 并看到案例研究部分，我尝试了您提供的较短代码作为替代解决方案，但似乎没有任何反应。这很奇怪，因为您提供的两个示例似乎都很完美。

【解决方案3】：

按照您的链接，我的location.href 转到http://www.liquidcomma.com/portfolio/project/TSF_Robot_Ad/1/，但页面中的项目链接指向http://www.liquidcomma.com/portfolio/project/trade_show_fabrications/1...这将使attr('href') != location.href。

在其他链接中，location.href 将以斜杠结尾，而链接的 href 则不会。

如果您希望它在未来发生变化（而且很可能会），您应该使用除 href 属性之外的其他东西来匹配您的项目。

【讨论】：