Question

我试图在用户点击之后更改孩子的颜色（在菜单中），并且我无法执行该操作。

我正在使用课程.active在向下滚动时更改菜单样式。我正在考虑添加.active::after，因此点击的<li>标记的每个子项都将更改其字体颜色。

.active工作正常，但.active::after根本不起作用。此外，代码还包括点击孩子时慢慢滚动。

jQuery的：

    /**
     * This part handles the highlighting functionality.
     * We use the scroll functionality again, some array creation and 
     * manipulation, class adding and class removing, and conditional testing
     */
    var aChildren = $("nav ul li").children(); // find the a children of the list items
    var aArray = []; // create the empty aArray
    for (var i=0; i < aChildren.length; i++) {    
        var aChild = aChildren[i];
        var ahref = $(aChild).attr('href');
        aArray.push(ahref);
    } // this for loop fills the aArray with attribute href values

    $(window).scroll(function(event){
        var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
        var windowHeight = $(window).height(); // get the height of the window
        var docHeight = $(document).height();
        var yOffset = window.pageYOffset;
        var breakpoint = 50;
        for (var i=0; i < aArray.length; i++) {
            var theID = aArray[i];
            var divPos = $(theID).offset().top; // get the offset of the div from the top of page
            var divHeight = $(theID).height(); // get the height of the div in question
            if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
                if (yOffset > breakpoint){
                    $("nav ul").addClass('active');
                    $("nav ul li a").addClass('active');
                  }else{
                    $("nav ul").removeClass('active');
                    $("nav ul li a").removeClass('active');
                  }
                $("a[href='" + theID + "']").addClass("active::after");
            } else {
                if (yOffset > breakpoint){
                    $("nav ul").addClass('active');
                    $("nav ul li a").addClass('active');
                  }else{
                    $("nav ul").removeClass('active');
                    $("nav ul li a").removeClass('active');
                  }
                $("a[href='" + theID + "']").removeClass("active::after");
            }
        }

        if(windowPos + windowHeight == docHeight) {
            if (!$("nav li:last-child a").hasClass("nav-active")) {
                var navActiveCurrent = $(".nav-active").attr("href");
                $("a[href='" + navActiveCurrent + "']").removeClass("active::after");
            $("nav li:last-child a").addClass("active::after");
            }
        }
    });
});

CSS：

nav ul.active{
  margin: -7px 0 0;
  background:rgba(0, 0, 0, 0.7);
}
nav ul li a.active{
  color: white;
}
nav ul li a.active::after{
  color: #ccc;
}

如何正确更改特定菜单子颜色？

Answer 1

在我看来，您可以尝试使用css focus伪选择器而不是之后。如在

nav ul li a.active::focus{
  color: #ccc;
}

有关详细信息，请参阅here。

另外，我不认为你可以使用jquery添加/删除伪类，如$（“a [href ='”+ theID +“']”）。addClass（“active :: after”）;和$（“a [href ='”+ theID +“']”）。removeClass（“active :: after”）;.有关详细信息，请参阅here和here。您可以添加/删除其他一些自定义类，例如visited等等。

 nav ul li a.active.visited{
  color: #ccc;
}

单击后突出显示菜单子项

1 个答案: