FullPage.js – 在非匹配部分添加活动类到菜单锚点

好吧，标题可能有点难以理解，我会尝试解释。

所以我使用的是fullpage.js

我总共有9个部分：首页关于（约有6个“部分”，是关于第一部分的延续）联系方式

在菜单中只有3个导航选项Home，about，contact。 我已经制作了菜单，以便在相应的部分添加活动类 – 就像使用现成的选项一样。 当我滚动并离开第一个关于部分时，活动类将被删除，菜单项不会突出显示。 所以这就是我希望活跃类继续关注所有“缺席”的事情。 因此，菜单项“关于”将突出显示，直到联系人部分。

我认为我可以使用一些“外部”JS，因此根据url，类将被添加到id为“all-about”的锚点：

$(document).ready(function () { if (location.href.match(/#about1/ig) || location.href.match(/#about2/ig)){ $('#all-about').addClass('active'); } }); 

这不起作用。 我会在整个页面中更改JS，或者如何更改我的代码？

谢谢！

Answer 1

我会利用插件回调来实现这一点。

你可以使用像这样的事情来使用afterLoad ：

 $.fn.fullpage({ slidesColor: ['red', 'blue'], afterLoad: function(anchor, index){ var activeItem; if(index == 1 || index == 2 || index == 3){ activeItem = $('#menu').find('li').first() }else{ activeItem = $('#menu').find('li').last() } activeItem .addClass('active') .siblings().removeClass('active'); } }); 

请注意，我不再使用menu选项来处理活动类，如我所愿。

实例

Answer 2

这是旧的，但对于其他任何人来说……此function内置于Fullpage.js。 只需在您的fullpage.js默认值中将“lockAnchors：false”更改为“lockAnchors：true”，或在调用时将其更改为选项。 然后你需要为你创建的#menu li.active添加你的css。 完成。