fullPage.js和固定導航 - 要突出顯示導航中的活動頁面

Question

我正在嘗試fullPage.js並希望使用固定導航。

如何更改導航錨點的顏色，以便您可以看到實際是哪個頁面？

正如我所看到的，fullPage.js將活動類添加到活動的部分（頁面）。但如何將它連接到我的導航a？

我嘗試了一些jQuery，但到目前爲止沒有任何工作。似乎.css（）不覆蓋我的舊值。

這裏就是我的了：

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

和我的JS

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

Answer 1

由於fullpage.js已經增加了 「積極」 級基於數據錨的部分，你只需要添加一些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>