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>