fullPage.js und feste Navigation - möchte aktive Seite in nav markieren

Question

Ich probiere fullPage.js und möchte eine feste Navigation damit verwenden.

Wie kann ich die Farbe der Nav-Anker ändern, so dass Sie sehen können, auf welcher Seite Sie tatsächlich sind?

Wie ich gesehen habe, fügt fullPage.js dem aktiven Abschnitt (Seite) eine aktive Klasse hinzu. Aber wie verbinde ich das mit meinem Navigationsgerät?

Ich habe versucht, einige jQuery, aber nichts hat bisher funktioniert. Es scheint, als ob .css() meine alten Werte nicht überschreibt.

Hier ist, was ich habe:

HTML

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

und meine JS

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

Answer 1

Da fullpage.js bereits die "aktive" Klasse Ihren Abschnitte auf der Grundlage Ihrer Daten Anker ergänzt Sie müssen nur etwas CSS-Code hinzufügen, um damit zu arbeiten.

Im Grunde so etwas wie dieses:

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

Auch, wenn Sie Ihr Navigationsmenü Anker über Hervorhebung basierend auf reden, was Abschnitt Sie sind sicher, auch Sie fullpage.js die menu Option nutzen. Hier ist das Beispiel aus dem 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>