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

如何让下面的站点根据显示的fullPage.js部分向每个锚链接添加活动类

代码笔：

HTML:

---

您需要查看jQuery中的scrollTop：

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

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

试试这个-您可以在任何HTML标记上使用和应用/删除类

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

$(document).ready(function(){

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

js提供了一个菜单选项，您可以使用它，因为它是详细的

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

请注意锚定的值必须与数据菜单锚定的值相同。你的情况不是这样。您正在使用about和aboutSection。

---

另请注意，活动类将添加到a元素中，而不是li元素中。

fullPage.js提供了许多更好的选择。加上没有滚动条，因此有滚动顶部属性不会改变。

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

$(document).ready(function(){

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

<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'
});