セクションをスクロールするとjQueryのハイライトメニュー項目

Question

セクションまでスクロールするときにメニュー項目を強調表示しようとしています。 強調した作品が、他のセクションにスクロールしたときに、何らかの理由で私は

を強調表示を削除することはできません。これは私のメニューは次のようになります。

私が使用して各セクションのためのHTMLで

<div id="navbar"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a data-id="home" href="#home">Home</a></li> 
      <li class="navbar-right"><a data-id="cont" href="#contact">Contact</a></li> 
      <li class="navbar-right"><a data-id="exp" href="#exp">Expertise</a></li> 
      <li class="navbar-right"><a data-id="wie2" href="#wie2">Wie</a></li> 
      </ul> 
</div> 

jQuery(window).scroll(function() { 
     var position = jQuery(this).scrollTop(); 

     jQuery('.section').each(function() { 
      var target = jQuery(this).offset().top; 

      var id = jQuery(this).attr('id'); 

      if (position >= target) { 
       jQuery('#navbar>ul>li>a').removeClass('clicked'); 
       jQuery('#navbar ul li a[data-id=' + id + ']').addClass('clicked'); 
      } 
     }); 
}); 

誰でもクラスが得る理由を任意のアイデアを持っています。idアンカー私はこれが私のjQueryのですclass="section"

を追加しました毎回削除されますか？私がjQuery('#navbar>ul>li>a').removeClass('clicked');をコメントアウトするので、それは素晴らしい作品です。クラスが正しく追加されています。しかし、それらを削除することはできません:(

Answer 1

を私がするので思う：#navbar>ul>li>aは#navbar ul li a

最初のと同じではありません#navbarする直接<ul>子を見つけようとされ、第二は<ul>子を見つけるために求めています（任意のレベルで）#navbar下と同じセレクタの残りのために行く。

here

子コンビネータ（E> F）は、より具体的なものと考えることができます見てください下位コンビネータ（E F）の を作成して、第1レベルの 子孫のみを選択します。

私は問題は、実際のコードを掘ることができないままですが、この行を更新しようとすることができ、まさに言うするためのハード

Answer 2

：

jQuery('#navbar>ul>li>a').removeClass('clicked'); 

へ：

jQuery('#navbar').find('clicked').removeClass('clicked'); 

そうすれば、再割り当ての前にすでにクラスをクリックしているリンクからのみ、クラスを「クリック」して削除することになります。

また、ブートストラップのscrollspy機能をチェックアウトすることをお勧めします。それはあなたが達成しようとしていることをしているように聞こえる。代わりに実装するか、コードを掘り下げて、どのように近づいているのかを知り、新しいことを学ぶことができます。

http://getbootstrap.com/javascript/#scrollspy

は、この情報がお役に立てば幸い！ **問題を修正していません**

Answer 3

haventはこれをテストしたが、私は、これは

jQuery(window).scroll(function() { 
     var position = jQuery(this).scrollTop(); 

     jQuery('.section').each(function() { 
      var target = jQuery(this).offset().top; 

      var id = jQuery(this).attr('id'); 
      jQuery('#navbar ul li a[data-id=' + id + ']').removeClass('clicked'); 
      if (position >= target) { 
       jQuery('#navbar ul li a[data-id=' + id + ']').addClass('clicked'); 
      } 
     }); 

});