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將添加到站點的body元素中，該元素為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個要顯示為活動狀態的子級。