Jquery addClass to navigation not working

Question

クラスをアクティブなnav項目に設定しようとする際に問題が発生しています。 私はどこが間違っているのか理解しようとすると助けが必要です。 正常に動作していないものがいくつかありますが、サブメニューを持つメニュー項目がデフォルトになり、どこが間違っているのか分かりません。

例えば、「お問い合わせ」と言っクリック - hrefがお問い合わせページに私を取るが、アクティブなクラスが適用されないと私は起こるしたいどのような「製品」

に残っていることは、アクティブクラスが適用されていますクリックするとここで、「製品」

に貼付されていない項目にJSFiddle https://jsfiddle.net/2yv92roL/は、事前に助けを

感謝です！ここで

は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> 

私のCSSです：ここでは

/* define a fixed width for the entire menu */ 
.navigation { 
    width: 150px; 
} 

/* reset our lists to remove bullet points and padding */ 
.mainmenu, .submenu { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

/* make ALL links (main and submenu) have padding and background color */ 
.mainmenu a { 
    display: block; 

    text-decoration: none; 
    padding: 10px; 

} 

/* add hover behaviour */ 
.mainmenu a:hover { 
    background-color: #C5C5C5; 
} 


/* when hovering over a .mainmenu item, 
    display the submenu inside it. 
    we're changing the submenu's max-height from 0 to 200px; 
*/ 

.mainmenu li:hover .submenu { 
    display: block; 
    max-height: 200px; 
} 

/* 
    we now overwrite the background-color for .submenu links only. 
CSS reads down the page, so code at the bottom will overwrite the code at the top. 
*/ 


/* hover behaviour for links inside .submenu */ 
.submenu a:hover { 
    background-color: #C5C5C5; 
} 

/* this is the initial state of all submenus. 
    we set it to max-height: 0, and hide the overflowed content. 
*/ 
.submenu { 
    overflow: hidden; 
    max-height: 0; 
    -webkit-transition: all 0.5s ease-out; 
} 
.navigation ul li .active { 
     color: #0080A6; 
    } 

は、あなたがのカップルを作る必要があり、私の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"); 
    }) 
}); 

Answer 1

です変更：お使いの場合の条件から

• 削除「$（この）.ATTR（」HREF「）== 『』」、これはあなたの「製品」メニューはデフォルト
• の追加により、アクティブクラスを得ている理由であります"$（"ナビゲーションul li "）。removeClass（"アクティブ "）;"

  $(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"); 
        }); 
      }); 
  

  ：それはここにあなたのメニュー

のhref属性が更新されたコードで一致するように、あなたの各以前に選択メニュー

からアクティブなクラスを削除するには、あなたのpgurlに「/」を追加する前に