Fullpage.js：如何添加css类＆＃34;活跃＆＃34;滑锚

Question

我添加了＆＃34;有效＆＃34;类到我的菜单条目，所以突出显示当前选择的部分。是否可以为幻灯片添加它？

版本：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

或者，如果您愿意，可以将类fullPage.js添加到您的网站的body元素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来说相对简单：

1. 获取当前的身体类别：即fp-viewing及其显示的内容
2. 在菜单中添加要在其中显示活动状态的第n个孩子。