Fullpage.js:如何添加css类“活动"类别?滑动锚 [英] Fullpage.js: How to add css class "active" to slide anchor

问题描述

我在菜单项中添加了活动"类，因此突出显示当前选中的部分.是否可以为幻灯片添加此内容?

I added the "active" class to my entries of a menu so highlight which section is currently selected. Is it possible to add this also for slides?

版本:2.6.4

推荐答案

您应该使用fullPage.js幻灯片回调来做到这一点，例如:

You should be using fullPage.js slides callbacks to do so, for example:

$('#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');
        }
    }
});

在线演示

或者，如果愿意，可以将class fullPage.js添加到站点的body元素中，该元素为fp-viewing-sectionAnchor-slideAnchor类型.参见此视频.

Or, if you prefer, the class fullPage.js adds to the body element of your site which is of the kind fp-viewing-sectionAnchor-slideAnchor. See this video.

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

在线演示

这篇关于Fullpage.js:如何添加css类“活动"类别?滑动锚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！