Question

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

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

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

我尝试了一些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已经添加了＆＃34; active＆＃34;根据数据锚点对您的部分进行分类，您只需添加一些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和固定导航 - 想在导航中突出显示活动页面

1 个答案: