在添加了"current"类在菜单中的活动项目使用jQuery，如何css更改项目的容器

After adding a "current" class to an active item in a menu using jQuery, how can css changes be made to the container of the item?

本文关键字：quot 项目 如何 jQuery css 活动 current 添加 菜单      更新时间：2023-09-26

我为菜单栏中的当前项添加了一个"active"类，并为其实现了平滑滚动功能。(http://jsfiddle.net/T98VG/)

我想项目的背景颜色改变菜单栏，但这似乎不能正常工作。到目前为止，菜单栏中链接的背景颜色改变了，而链接所在的容器没有改变。我该如何实现呢?

为当前项目添加"active"状态的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，只有活动链接的背景颜色被突出显示。我想框"navli"填充的颜色，以及。

我是新来的编码，所以所有的帮助是欢迎的。谢谢你！

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

查看更新后的JSFiddle

相关文章：