Fullpage.js:如何添加cssclass"active"滑动锚点

Question

我将 "active" class 添加到我的菜单条目中，因此突出显示当前选择的部分。是否也可以为幻灯片添加此内容？

版本：2.6.4

Answer 1

您应该使用 fullPage.js 幻灯片回调来执行此操作，例如：

$('#fullpage').fullpage({    
    afterLoad: function (anchorLink, index) {
        //section 2 loaded
        if (index == 2) {
            //adding active class to the 1st element in the slide menu
            $('#myMenu').find('li').eq(0).addClass('active');
        }
    },

    //
    afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {

        //only for slides in section 2
        if (index == 2) {
            $('#myMenu').find('li.active').removeClass('active');
            $('#myMenu').find('li').eq(slideIndex).addClass('active');
        }
    }
});

Demo online

或者，如果您愿意，可以将 class fullPage.js 添加到您网站的正文元素中，该元素属于 fp-viewing-sectionAnchor-slideAnchor 类型。参见 this video。

body.fp-viewing-1-0 #myMenu .first{
    background: yellow;
}

Demo online

Answer 2

.fp-viewing-1 ul#menu li:nth-child(1) a

这个用css比较简单：

获取当前正文class：即fp-viewing及其显示的内容
在您想要在菜单中显示活动的位置添加第 n 个子项。

Fullpage.js:如何添加cssclass"active"滑动锚点

Fullpage.js: How to add css class "active" to slide anchor

javascript

css

fullpage.js