javascript - 当前幻灯片 + 导航

Question

我有一个例子。在标题中有一个菜单。滚动页面( block )后，下一个菜单项 (li) 中的文本应为红色。

JS Fiddle

例如菜单上的点击功能:

$(".navigation li").click(function () {
        activeSection = $(this).index();
        $(".navigation li, .mobile-menu li").css({
            color: '#879996'
        });
        $(this).css({
            color: 'red'
        });
        scrollMeToSection();
}); 

Answer 1

检查，如果这是你想要的:JS Fiddle

我添加了一些 css 规则:

.header-bg .navigation li {
    color: #879996;
}
.header-bg .navigation li.current {
    color: #ff0000;
}

此外，我还向第一个 li 添加了 'current' 类:

<li id="NavWho" class='current'>Rules</li>

并更新了scrollMeToSection函数:

function scrollMeToSection() {
    $('body').animate({
        scrollTop: ($(window).height() * activeSection)
    }, '1000', 'swing', function () {
        // can do something when finishes animating here.
        $('.navigation ul li').removeClass('current');
        $('.navigation ul li').eq(activeSection).addClass('current');
    });
}