3

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

所以我正在使用fullpage.js

我总共有 9 个部分： 主页 About（about 有 6 个“undersections”，是第一个 about 部分的延续） Contact

在菜单中只有 3 个导航选项主页、关于、联系。我已经制作了菜单，以便在相应部分添加活动类 - 就像使用现成的选项一样简单。当我滚动并离开第一个 about 部分时，活动类被删除并且菜单项未突出显示。所以这就是我希望活动类保留在 about 的所有“部分”上的东西。因此，菜单项“关于”会突出显示，直到联系部分。

我想我会让它与一些“外部”JS一起工作，所以根据url，类将被添加到id为“all-about”的锚中：

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

这不起作用。我会在整页 JS 中更改什么或如何更改我的代码以使其正常工作？

谢谢！

4

2 回答 2

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选项来按我的意愿处理活动类。

活生生的例子

于 2014-03-06T13:09:27.830 回答
2

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

于 2015-11-01T17:37:52.277 回答