Fullpage.js 幻灯片上的导航栏处于活动状态，而不是部分

Question

大家好，大家刚开始在这里学习 Fullpage.js，我想知道我是否可以将我的页面分成 3 个部分，1 个用于页眉，1 个用于页脚，1 个用于页脚。然后在Section部分设置4-5个滑块。我想要的是导航栏只突出显示该部分中的当前滑块，而不是同时突出显示所有 4-5 个滑块...... 像这样：

然后当我转到这些部分时，它会这样做：

最后一节：

如何让它只在当前滑块上激活而不是在所有滑块上激活？提前谢谢你^^

Answer 1

我建议您为此使用 fullPage.js state classes。可能是最简单的方法。

使用 fp-viewing-x-y class 添加到 body 应该很容易。例如：

.fp-viewing-home-0 #menu li:nth-child(1){
    background:red;
}
.fp-viewing-home-1 #menu li:nth-child(2){
    background:red;
}
.fp-viewing-home-2 #menu li:nth-child(3){
    background:red;
}

Reproduction online

如果您更喜欢使用 jQuery 或 JavaScript，您可以使用 fullpage.js 回调，例如 onLeave。参见 and the example online。

Fullpage.js 幻灯片上的导航栏处于活动状态，而不是部分

Fullpage.js navbar active on slides not sections

fullpage.js