FullPage.js-在不匹配的部分上将活动类添加到菜单锚点

问题描述

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

Okay, the title might be a bit hard to understand, I'll try and explain.

所以我正在使用 fullpage.js

我总共有9个部分:家关于(about有6个"undersections"，是第一个about部分的延续)联系

I have in total 9 sections:HomeAbout(about has 6 "undersections" that is a continuation of the first about section)Contact

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

In the menu there are only 3 navigation options Home, about, contact. I've made the menu so that the active class is added when on corresponding section - as simply done with ready made options.When I scroll and leave the first about section the active class is remove and the menu item is not highlighted.So here's the thing I want the active class to remain on all the "undersections" of about. So the menu item "About" is highlighted until the contact section.

我认为我可以使其与某些外部" JS一起使用，因此根据URL，该类将被添加到ID为"all-about"的锚点:

I thought I'd make it work with some "outside" JS so depending on the url the class would be added to the anchor with id "all-about":

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

这不起作用.我将在整页JS中更改什么，或者如何更改代码以使其正常工作?

This does not work.What in the fullpage JS would I change or how to change my code to work?

谢谢！

推荐答案

我将利用插件回调来实现这一目标.

I would make use of the plugin callbacks to achieve that.

您可以将afterLoad与以下内容配合使用:

You could make use of afterLoad with something like this:

$.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选项来按需处理活动类.

Note that I'm not using the menu option anymore to handle the active class as I wish.

实时示例

这篇关于FullPage.js-在不匹配的部分上将活动类添加到菜单锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！