Question

我有一个单页网站，我需要菜单中的活动链接为不同的颜色。在此代码中是否有一种方法可以使用它，以便在单击链接时，背景颜色不会在滚动页面的所有链接上显示。

这是为了平滑滚动和更改链接的背景颜色：

 $('a').click(function (e) {
    e.preventDefault();
    var href = $(this).attr('href');
    $("html:not(:animated),body:not(:animated)").animate({
        'scrollTop': $(href).offset().top
    }, 700, 'swing');
});
$('#nav a').click(function () {
    $('#nav a').css("background-color", "");
    $(this).css("background-color", "#333333");
});

这适用于用户手动滚动页面并且链接上的背景颜色发生变化时：

$(window).scroll(function () {
    var href = $(this).scrollTop();
    $('.link').each(function (event) {
        if (href >= $($(this).attr('href')).offset().top - 1) {
            $('.link').not(this).removeClass('active');
            $(this).addClass('active');
        }
    });
});

这里是小提琴http://jsfiddle.net/MCka4/

Answer 1

您可以使用CSS轻松完成此操作例如，您可以确定使用.active CSS类选择导航的哪些元素：

#nav a {
    background-color: transparent;
}
#nav a.active {
    background-color: #333333;
}

然后您可以更改代码以使用刚刚创建的新CSS类：

$('#nav a').click(function () {
    $('#nav a.active').removeClass('active');
    $(this).addClass('active');
});
$(window).scroll(function () {
    var href = $(this).scrollTop();
    $('.link').each(function (event) {
        if (href >= $($(this).attr('href')).offset().top - 1) {
            $('#nav a.active').removeClass('active');
            $(this).addClass('active');
        }
    });
});

单页网站上的活动链接

1 个答案: