javascript - 使用 jQuery 将 "current"类添加到菜单中的事件元素后，如何对元素的容器进行 css 更改？

Question

我在菜单栏中的当前元素中添加了一个“事件”类，并为其实现了平滑滚动功能。 (http://jsfiddle.net/T98VG/)

我想改变菜单栏中元素的背景颜色，但这似乎无法正常工作。到目前为止，菜单栏中链接的背景颜色发生变化，而不是链接所在的容器。我该如何实现呢？

用于向当前元素添加“事件”状态的 jQuery 代码(这很好用):

$(document).ready(function () {
$(document).on("scroll", onScroll);

//smoothscroll
$('#nav a[href^="#"]').on('click', function (e) {
    e.preventDefault();
    $(document).off("scroll");

    $('#nav a').each(function () {
        $(this).removeClass('current');
    });
    $(this).addClass('current');

    var target = this.hash,
        menu = target;
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top-0
    }, 1000, 'swing', function () {
        window.location.hash = target;
        $(document).on("scroll", onScroll);
    });
});

});

function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#nav a').each(function () {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $('#nav a').removeClass("current");
        currLink.addClass("current");
    }
    else{
        currLink.removeClass("current");
    }
});

}

这是一个 JSFiddle，其中包含我目前拥有的代码和问题 (http://jsfiddle.net/T98VG/)。在包含 4 个元素的菜单栏中:#1、#2、#3 和 #4，只有事件链接的背景颜色会突出显示。我希望“nav li”框也充满颜色。

我是编码新手，所以欢迎所有帮助。谢谢你!

Answer 1

您可以使用 parent()调用每个链接，并添加 current类链接的父级(<li> 的)而不是链接本身。

查看更新的 JSFiddle