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

Demo online

或者，如果你愿意，类全页.js添加到您网站的正文元素中，该类型为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个孩子在菜单中显示活动状态。