Javascript Jquery向导航添加类不工作

我在尝试将类设置为活动导航项时遇到问题。 我需要一些帮助来找出哪里出了问题。 这是一些工作，但不正确，它默认为菜单项，其中有一个子菜单，我看不出我哪里出了问题

例如，当点击说“联系我们”时，href会将我带到联系人页面，但活动类不适用，并保留在“产品”上

我想要发生的是，活动类应用于单击的项目，而不是停留在“产品”上

这是JSFIDLE

提前谢谢你的帮助

以下是HTML：

<nav class="navigation">
 <ul class="mainmenu">
    <li><a href="{{URL('/')}}">Home</a></li>
    <li><a href="{{URL('ourphilosophy')}}">Our Philosophy</a></li>
    <li><a href="">Products</a>
      <ul class="submenu">
        <li><a href="{{URL('/products')}}">Charbonnier Cookware</a></li>
        <li><a href="{{URL('/dinnerware')}}">Charbonnier Dinnerware</a></li>
        <li><a href="{{URL('/storageware')}}">Charbonnier Storageware</a></li>
      </ul>
    </li>
    <li><a href="{{URL('/contact')}}">Contact us</a></li>
 </ul>
</nav>

这是我的JQuery

$(function() {
     var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
     $(".navigation ul li a").each(function(){
          if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
          $(this).addClass("active");
     })
}); 

---

您需要做一些更改：

• 从if条件中删除“$（this）.attr（“href”）=''，这就是默认情况下“产品”菜单获取活动类的原因
• 在each之前添加“$（.navigation ul li a”）.removeClass（“active”）；”以从先前选择的菜单中删除活动类
• 将“/”添加到您的pgurl，使其与菜单的href属性匹配

以下是更新的代码：

 $(function () {
        var pgurl = "/" + window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
        $(".navigation ul li a").removeClass("active");
        $(".navigation ul li a")
            .each(function() {
                if ($(this).attr("href") == pgurl)
                    $(this).addClass("active");
            });
    });

---

您需要做一些更改：

• 从if条件中删除“$（this）.attr（“href”）=''，这就是默认情况下“产品”菜单获取活动类的原因
• 在each之前添加“$（.navigation ul li a”）.removeClass（“active”）；”以从先前选择的菜单中删除活动类
• 将“/”添加到您的pgurl，使其与菜单的href属性匹配

以下是更新的代码：

 $(function () {
        var pgurl = "/" + window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
        $(".navigation ul li a").removeClass("active");
        $(".navigation ul li a")
            .each(function() {
                if ($(this).attr("href") == pgurl)
                    $(this).addClass("active");
            });
    });

---

从理论上讲，这应该是可行的，但实际情况是，它已经将“活动”类从默认值删除为“产品”-然而，在单击导航项并检查DOM时，它似乎没有应用活动类。你能做一个JSFIDLE吗？点击页面刷新，我不相信活动类会继续。我写这篇文章是为了检查是否有匹配项，但它不会返回，所以我无法找出哪里可能出错。。。。$（function（）{var pgurl=“/”+window.location.href.substr（window.location.href.lastIndexOf（“/”）+1）；var crnt=$（this.attr（“href”）；$（.navigation ul li a”）.each（function（）{if（crnt==pgurl）console.log（“true”）；}）；从理论上讲，这应该是可行的，但实际情况是，它已经将“活动”类从默认值删除为“产品”-然而，在单击导航项并检查DOM时，它似乎没有应用活动类。你能做一个JSFIDLE吗？点击页面刷新，我不相信活动类会继续。我写这篇文章是为了检查是否有匹配项，但它不会返回，所以我无法找出哪里可能出错。。。。$（function（）{var pgurl=“/”+window.location.href.substr（window.location.href.lastIndexOf（“/”）+1）；var crnt=$（this.attr（“href”）；$（.navigation ul li a”）.each（function（）{if（crnt==pgurl）console.log（“true”）；}）；