fullPage.jsと固定ナビゲーション - ナビのアクティブページを強調表示したい

Question

私はfullPage.jsを試していて、固定ナビゲーションを使いたいと思っています。

実際にどのページに表示されるようにナビアンカーの色を変更できますか？

これまで見てきたように、fullPage.jsは、アクティブなセクション（ページ）にアクティブなクラスを追加します。しかし、それを私のnavにどのように接続するのですか？

私はいくつかのjQueryを試しましたが、これまでのところ何もできませんでした。 .css（）は私の古い値を上書きしないようです。

は、ここで私が得たものです：fullpage.js以来

html 
    head 
    title CSS Test 

    script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js") 

    link(href="css/styles.css" rel="stylesheet") 

    body 
    nav 
     a.(href="#page1") B4D455 
     ul 
     li 
      a(href="#page2") Page2 
     li 
      a(href="#page3") Page3 
     li 
      a(href="#page4") Page4 

    .main 
     .section.page1#page1 

     .section.page2#page2 

     .section.page3#page3 

     .section.page4#page4 

    script(src="js/jquery.easings.min.js") 
    script(src="js/scrolloverflow.min.js") 
    script(src="js/jquery.fullPage.js") 
    script(src="js/main.js") 

と私のJS

$(document).ready(function() { 
    $('.main').fullpage(); 
}); 

Answer 1

HTMLは、すでにデータアンカーに基づいて、あなたのセクションに "アクティブ" クラスを追加します、あなたはそれを扱うためにいくつかのCSSコードを追加する必要があります。

基本的に、このような何か：あなたはあなたが何であるかのセクションに基づいて、ナビゲーションメニューアンカーをハイライト表示について話している場合

.your-nav-class a:active { 
    background-color: #B4D455; 
} 

また、また、あなたがfullpage.jsのmenuオプションを利用確保。ここでdocsからの例です：

JS：

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

HTML：

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