Question

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

所以我正在使用fullpage.js

我总共有9个部分：家关于（关于有关于第1节的延续的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选项来处理活动类了。

Live example

Answer 2

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

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

2 个答案: