Fullpage.js: Как добавить класс CSS "активный" для привязки слайдов

Question

Я добавил "активный" класс в свои пункты меню, чтобы выделить, какой раздел выбран в данный момент. Можно ли добавить это также для слайдов?

Версия: 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');
        }
    }
});

Демо онлайн

Или, если хотите, класс fullPage.js добавляет к элементу тела вашего сайта, который имеет вид fp-viewing-sectionAnchor-slideAnchor, Смотрите это видео.

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

Демо онлайн

Answer 2

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

Это относительно просто с css:

1. Получить текущий класс тела: т.е. fp-viewing и что бы это ни показывало
2. Добавьте n-ый дочерний элемент, где вы хотите отобразить активный в вашем меню.