如何使用 Javascript 添加基于页面 URL 的 Active 类答案

【问题标题】：How to add Active class based on page URL using Javascript如何使用 Javascript 添加基于页面 URL 的 Active 类
【发布时间】：2019-08-28 02:10:33
【问题描述】：

很抱歉，如果之前已经解决过这个问题，但我对 JS 很陌生。
我正在使用我在这里找到的示例Add Active Class to a Navigation Menu Based on URL javascript - Works only when alert is given
我修改后的 JS 在这里：

$(function() {
    setTimeout(function(){
        var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
        console.log(pgurl);

        $(".mega_menu ul li a").each(function(){
            if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
            $(this).addClass("active");
        });
    }, 5000);
});

控制台日志正在生成看似正确的链接，但活动类未应用于所需的类，我已包含屏幕截图以期提供帮助。console log displaying URL、NAV elements that ACTIVE class should be applied to。

提前谢谢你！

【问题讨论】：

问题似乎与 .each 循环有关。尤其是 this 关键字。在那里添加控制台日志并检查它的值。
嗨@SagarAgrawal，谢谢，但我不确定你的意思，你能改变我的代码，所以我明白，然后我很乐意测试
你能检查一下 pgurl 的值吗？看来问题是 window.location.href.substr(window.location.href.lastIndexOf("/")+1) 您提取当前网址的逻辑。改用路径名

标签： javascript class url add

【解决方案1】：

感谢大家的帮助。下面是运行的代码，显然我对JS的理解还有一段路要走：

        $(function() {
            setTimeout(function(){

                var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);

                console.log(pgurl)

                $("ul.mega_menu li a.mega_menu_with_ul").each(function(){
                      var _this = this;
                      console.log(_this)
                    //your condition fails here, can you check your pgurl has this value?
                    //old - if($(this).attr("href") == pgurl || $(this).attr("href") == '' )  
                    // pgurl - hardcoded 'merchandise2.asp?Merchandise_Group1_ID=8' to run the code successfully
                    if($(_this).attr("href") == pgurl || $(_this).attr("href") == '' ) {
                        $(_this).addClass("active"); 
                        console.log(_this)
                    }
            });

        }, 50); });

我相信我在 CSS 调用的结构方式和我对使用 Javascript 处理正确元素所需的具体程度的理解方面都遇到了问题。

【讨论】：

【解决方案2】：

除了pgurl，你的代码没有问题。

$(function() {
setTimeout(function(){

 //   var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);

    var pgurl = window.location.pathname.replace("/","") + window.location.search; //replace first "/" and make it empty

    $("#nav ul li a").each(function(){
          var _this = this;
         //your condition fails here, can you check your pgurl has this value?
         //old - if($(this).attr("href") == pgurl || $(this).attr("href") == '' )  
       // pgurl - hardcoded 'merchandise2.asp?Merchandise_Group1_ID=8' to run the code successfully
        if($(_this).attr("href") == pgurl || $(_this).attr("href") == '' ) {
           $(_this).addClass("active"); 
           console.log(_this)
        }
    });

}, 50); });

请注意：您不应该像这样使用获取和提取 URL window.location.href.substr(window.location.href.lastIndexOf("/")+1);

改为参考获取 url 详细信息的最简单方法 https://www.w3docs.com/snippets/javascript/how-to-get-current-url-in-javascript.html

【讨论】：

嗨@Kannan G，感谢您的回复，您所做的更改是否只会在链接明确匹配“merchandise2.asp?Merchandise_Group1_ID=8”时添加类。这个想法是获得当前页面的 URL，修剪掉前面的部分 [即www.website.com.au/]，然后应用类“活动”，如果网站的一部分留在这个实例“merchandise2.asp?Merchandise_Group1_ID=8”，但是如果你在菜单的另一个部分，这可能会改变, [ 例如下一个菜单项有链接“merchandise2.asp?Merchandise_Group1_ID=24”。
@adouglas1880 你现在可以检查一下吗，我更新了我的代码块
这返回了完整的 URL，而不是最后的部分 [即"域名"/merchandise2.asp] 不是必需的 "merchandise2.asp?Merchandise_Group1_ID=8"
抱歉耽搁了，window.location.search获取查询参数@adouglas1880