位置にスクロールするとナビゲーションバーボタンがアクティブになります

Question

この問題を正確に説明するのは正直なところありません。私はいくつかの<li>要素を持つnavbarを持っています。そのうちの1つは、その中にドロップダウンメニュー用の<ul>コレクションを持っています。私はちょうどそれに気づいたが、Navbarがこの特定のボタンを対象とするセクションの上にあるときにそのページをスクロールすると、navbarは<li>に変わり、私のCSSに従って色が変わる。

ここに私のドロップダウンメニューのコードです。

<li class="dropdown"> 
        <a class="dropbtn" data-toggle="dropdown" href="#pricing"> 
         products 
         <span class="caret"></span> 
        </a> 
        <ul style="list-style:none !important; padding:0px 0px !important;" class="dropdown-content"> 
         <li><a ng-click="SwitchProduct(0)" href="#pricing" data-toggle="collapse" data-target=".navbar-collapse.in">CPR-Web</a></li> 
         <li><a ng-click="SwitchProduct(1)" href="#pricing" data-toggle="collapse" data-target=".navbar-collapse.in">SC-Tracker</a></li> 
         <li><a ng-click="SwitchProduct(2)" href="#pricing" data-toggle="collapse" data-target=".navbar-collapse.in">Keystone Jury</a></li> 
        </ul> 
       </li> 

私は今、調査していますが、私は考えることができる唯一のことは、セクションへのナビゲーションバーのリンク上の製品は、それが上記の中に積極的に変化することです。しかし、私はまだなぜか分からない。

また、正しく説明するのが難しいので、ここではバグを見るためのリンクです。ページに移動すると、製品にスクロールし、navbarの単語がアクティブに変わるのを確認します。 Link

Answer 1

だから私はhref="#pricing"を持って何らかの理由で問題の原因がわかった。だから、私がすでにng-clickを使って製品カルーセルをスクロールしていたのを修正するために、メインページではなくスクロールロジックを追加した。また、私はすでに過去のHREFタグなし<a>リンクを作っFakeClickableというクラスを作成していた

$scope.SwitchProduct = function (number) { 

      // Store hash 
      var hash = "#pricing"; 

      // Using jQuery's animate() method to add smooth page scroll 
      // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area 
      $('html, body').animate({ 
       scrollTop: $(hash).offset().top 
      }, 900, function() { 

       // Add hash (#) to URL when done scrolling (default click behavior) 
       window.location.hash = hash; 
      }); 

      $("#ProductsCycle").carousel(number); 

     }; 

ように表示されます。

<li class="dropdown"> 
        <a href="" class="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a ng-click="SwitchProduct(0)" class="FakeClickable">CPR-Web</a></li> 
         <li><a ng-click="SwitchProduct(1)" class="FakeClickable">SC-Tracker</a></li> 
         <li><a ng-click="SwitchProduct(2)" class="FakeClickable">Keystone Jury</a></li> 
        </ul> 
       </li>