Question

我有一个静态HTML侧边栏，似乎每当我使用自定义的侧边栏插件（WordPress）将网页加载到网站上时，就会添加该静态边栏。

我正在尝试将一个类添加到侧边栏中的当前活动A标签中，以便为它设置样式。

由于每次加载页面时都会添加静态HTML侧边栏，因此在下一页加载后，我添加的类将被删除。

这是在下一页加载后添加类的一种方法吗？还是将有问题的元素保留在变量中，直到加载下一页？

$(document).ready(function() {
        var selector = 'a.custom-sidebar-item';
        var url = window.location.href;

        $(selector).each(function(){
            $(selector).removeClass('active-custom-sidebar-item');

            if(url == $(this).attr('href')) {
                $(this).addClass('active-custom-sidebar-item');
                $(this).css("border-bottom", "2px solid red");
            }
        });
});

编辑：

稍微更改了代码。

这是控制台日志中的内容-https://imgur.com/a/g9JBMwO。

这就是我要实现的目标-https://imgur.com/a/W41xiOA。

解决方法，实际上有效的是“ $（this）.css（“ border-bottom”，“ 2px solid red”）;“。仍然不确定为什么“ $（this）.addClass（'active-custom-sidebar-item'）;”不管用。所以我直接用jQuery添加CSS，而不是在加载时添加类。我猜毕竟更好。

P.S。：：我之所以不使用.siblings（）从其他侧边栏链接中删除该类，是因为它们中的一些是标签，而另一些是标签。稍后将优化代码。该代码当前添加了该类（已通过console.log检查），但在下一页加载时将被覆盖。

Answer 1

在所有页面上放置相同的脚本。您可以通过将其包含在wordpress的通用页脚中来实现。在您的代码中，您可能会在添加类后立即删除该类，请尝试此操作。

$(document).ready(function() {
   var selector = 'a.custom-sidebar-item';
   var url = window.location.href;
   $(selector).removeClass('active-custom-sidebar-item');
   $(selector).each(function(){   
      if(url == $(this).attr('href')) {
        $(this).addClass('active-custom-sidebar-item');
    }
   });
});

Answer 2

我的解决方案恰好是...而不是：

$(this).addClass("active-custom-sidebar-item");

实际上：

$(this).css("border-bottom", "2px solid red");

在使用我们打开的网址检查元素后，在 window.ready（）上

。用脚本添加样式是可行的，所以无论如何我都达到了预期的结果，但是仍然不确定为什么添加类不起作用...

jQuery在下一页加载后执行，不是当前的

2 个答案: