滑块/滚动导航 - 从导航中排除部分并更改部分的导航颜色

Question

嗨，我目前正在使用整页.js并想使用固定的"滑块"导航(右侧有点)，但有两个问题我正在尝试解决。

1. 如何使导航中仅某些部分显示为项目/链接，而不是每个部分(它当前选择)？基本上，我每 3-4 个部分都有一个"标题幻灯片"，只希望这些部分出现在导航中，而不是介于两者之间的所有部分。是否可以创建一些变量用作目标？或者有人知道允许这种行为的替代幻灯片导航吗？

   function addVerticalNavigation(){
   $body.append('<div id="' + SECTION_NAV + '"><ul></ul></div>');
   var nav = $(SECTION_NAV_SEL);
   nav.addClass(function() {
   return options.showActiveTooltip ? SHOW_ACTIVE_TOOLTIP + ' ' + options.navigationPosition : options.navigationPosition;
   });
   for (var i = 0; i < $(SECTION_SEL).length; i++) {
   var link = '';
   if (options.anchors.length) {
   link = options.anchors[i];
   }
   var li = '<li><a href="#' + link + '"><span></span></a>';
   

2. 我想根据特定部分的背景颜色来区分导航的颜色(白色或黑色)。我找到了一个代码片段，可以帮助我为固定导航栏实现这一目标......使标题/导航在网站的不同部分更改颜色 ...但是它的目标是 html/a 导航"div"，这对于幻灯片导航不存在......据我所知，很多这些jquery滑块导航就是这种情况。有人可以建议一种解决方法，或者知道一个包含html的解决方法吗？

Answer 1

1-可能最简单的方法是创建自己的导航系统并使用整页.js回调或状态类来设置活动系统的样式。 检查此答案。

2-只需覆盖元素的活动类并使用不同的颜色。

#fp-nav ul li:nth-child(1) a.active span, 
#fp-nav ul li:nth-child(1):hover a.active span{
background:blue;
}
#fp-nav ul li:nth-child(2) a.active span, 
#fp-nav ul li:nth-child(2):hover a.active span{
background:red;
}

在线演示