Question

如何让以下网站根据显示的fullPage.js部分为每个锚链接添加活动类？

Codepen：http://codepen.io/anon/pen/wJrwbq。

HTML：

<nav>

    <ul id="menu">

        <li>

            <a>Menu</a>

            <div id="dropdown">

            <ul>

                <li class="navLink active"><a href="#home" data-menuanchor="homeSection"><span class="navNumber">01</span>Home</a></li>

                <li class="navLink"><a href="#about" data-menuanchor="aboutSection"><span class="navNumber">02</span>About</a></li>

                <li class="navLink"><a href="#skills" data-menuanchor="skillsSection"><span class="navNumber">03</span>Skills</a></li>

                <li class="navLink"><a href="#work" data-menuanchor="workSection"><span class="navNumber">04</span>Work</a></li>

                <li class="navLink"><a href="#contact" data-menuanchor="contactSection"><span class="navNumber">05</span>Contact</a></li>

            </ul>

            </div>

        </li>

    </ul>

    </nav>

CSS：

.navLink > a:hover,
.navLink.active > a,
.navLink.active > a > span
{
  color: #1957EF;
  text-decoration: none;
}

Answer 1

fullPage.js提供了menu选项，您可以将其用于详细in the documentation。

菜单 :(默认false）选择器可用于指定要与各部分链接的菜单。这样，滚动部分将使用活动类激活菜单中的相应元素。这不会生成菜单，只会将活动类添加到给定菜单中的元素以及相应的锚链接。为了将菜单的元素与部分链接起来，需要使用HTML 5数据标记（data-menuanchor）来使用与部分中使用的相同的锚链接。例如：

<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').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});

请注意anchors的值必须与data-menuanchor的值相同。在你的情况下，它不是。您正在使用about，然后使用aboutSection。另请注意，active课程将添加到您的a元素，而不会添加到li。

Answer 2

你需要在jQuery中查看scrollTop：https://api.jquery.com/scrollTop/

简而言之，您需要从页面顶部开始测量滚动位置，如果该位置等于某个数字，请使用jQuery将活动类添加到链接中，否则将其删除。

网上有很多这样的例子，我相信你能找到一些东西！

Answer 3

试试这个 - 您可以使用.removeClass()和.addClass()在任何HTML代码上应用/删除类。

您需要在页面中添加以下代码

$(document).ready(function(){

  $(".navLink").click(function(){
    $(".navLink").removeClass("active");
    $(this).addClass("active");
  });  
});

将活动锚类链接到页面部分

3 个答案: