アクティブなアンカークラスをページセクションにリンクする

Question

表示されるfullPage.jsセクションに基づいて、各アンカーリンクにアクティブなクラスを追加するにはどうすればよいですか？

コデペン：http://codepen.io/anon/pen/wJrwbq。

HTML：

<nav> 

    <ul id="menu"> 

     <li> 

      <a>Menu</a> 

      <div id="dropdown"> 

      <ul> 

       <li class="navLink active"><a href="#home" data-menuanchor="homeSection"><span class="navNumber">01</span>Home</a></li> 

       <li class="navLink"><a href="#about" data-menuanchor="aboutSection"><span class="navNumber">02</span>About</a></li> 

       <li class="navLink"><a href="#skills" data-menuanchor="skillsSection"><span class="navNumber">03</span>Skills</a></li> 

       <li class="navLink"><a href="#work" data-menuanchor="workSection"><span class="navNumber">04</span>Work</a></li> 

       <li class="navLink"><a href="#contact" data-menuanchor="contactSection"><span class="navNumber">05</span>Contact</a></li> 

      </ul> 

      </div> 

     </li> 

    </ul> 

    </nav> 

CSS：

あなたはjQueryのでscrollTopスプライトを見てする必要があります

.navLink > a:hover, 
.navLink.active > a, 
.navLink.active > a > span 
{ 
    color: #1957EF; 
    text-decoration: none; 
} 

Answer 1

：https://api.jquery.com/scrollTop/

を一言で言えば、あなたは上からスクロール位置を測定する必要がありますその位置が特定の番号と等しい場合は、jQueryを使用してアクティブなクラスをリンクに追加し、そうでなければ削除します。

このオンラインの例はたくさんありますが、私はあなたが何かを見つけることができると確信しています！

Answer 2

お試しください - .removeClass()と.addClass()を使用して、HTMLタグにクラスを適用/削除できます。あなたがあなたのページでのコードの下に

$(document).ready(function(){ 

    $(".navLink").click(function(){ 
    $(".navLink").removeClass("active"); 
    $(this).addClass("active"); 
    }); 
}); 

Answer 3

fullPage.jsを追加する必要が

は、それがin the documentation詳細であるとして、あなたはそのために使用することができますmenuオプションを提供します。

メニュー：（デフォルトfalse）セレクタセクションとリンクするメニューを指定するために使用することができます。このようにして、セクションのスクロールは、class activeを使用してメニュー内の対応する要素をアクティブにします。これはメニューを生成するのではなく、対応するアンカーリンクを持つ指定されたメニューの要素にアクティブクラスを追加するだけです。メニューの要素をセクションにリンクするには、セクション内で使用されているのと同じアンカーリンクを使用するHTML 5データタグ（data-menuanchor）が必要です。例：初期設定で

<ul id="myMenu"> 
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li> 
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li> 
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li> 
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li> 
</ul> 

：

$('#fullpage').fullpage({ 
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 
    menu: '#myMenu' 
}); 

anchorsの値はdata-menuanchorと同じになるように持っているかに注意してください。あなたの場合はそうではありません。 aboutを使用し、次にaboutSectionを使用しています。 activeクラスはa要素に追加され、li要素には追加されません。