fullPage.js 和固定导航 - 想要在导航中突出显示活动页面

Question

我正在尝试 fullPage.js 并希望使用固定导航。

如何更改导航锚的颜色，以便您可以看到您实际所在的页面？

如我所见，fullPage.js 将活动 class 添加到活动部分（页面）。但是如何将其连接到我的导航？

我尝试了一些 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 已经根据您的数据锚将 "active" class 添加到您的部分，您只需添加一些 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>

fullPage.js 和固定导航 - 想要在导航中突出显示活动页面

fullPage.js and fixed navigation - want to highlight active page in nav

javascript

jquery

fullpage.js