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

时间:2014-03-06 10:20:49

标签: jquery menu fullpage.js

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

所以我正在使用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,或者如何更改我的代码?

谢谢!

2 个答案:

答案 0 :(得分:3)

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

你可以使用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

答案 1 :(得分:2)

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