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

【问题标题】：Slider/scrolling navigation - excluding sections from nav and changing nav color over sections滑块/滚动导航 - 从导航中排除部分并更改部分的导航颜色
【发布时间】：2017-05-29 22:39:06
【问题描述】：

您好，我目前正在使用 fullpage.js 并想使用固定的“滑块”导航（右侧有点），但有两个问题我正在尝试解决。

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

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

我想根据特定部分的背景颜色来区分导航的颜色（白色或黑色）。我找到了一个代码 sn-p 可以帮助我在固定导航栏上实现这一点...Make Header/Navigation change colour when on different section of the website ...但是它的目标是 html/a nav 'div'，它不存在于 slidesNav ...据我所见，很多这些 jquery 滑块导航都是这种情况。有人可以建议一种解决方法，或者知道其中包含 html 的方法吗？

【问题讨论】：

标签： javascript jquery css fullpage.js

【解决方案1】：

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

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

Demo online

【讨论】：