javascript - 使用 JS 更改特定类的链接 css 颜色

Question

所以我有一个标题，我想在开始滚动时更改标题中链接的颜色。标题中的导航在列表中:

<nav class="top-nav">
    <ul class="top-nav">
        <li><a href="#home" class="scroll">Home</a></li>
        <li><a href="#services" class="scroll">Services</a></li>
        <li><a href="#port" class="scroll">Portfolio</a></li>
        <li><a href="#team" class="scroll">Team</a></li>
        <li><a href="#contact" class="scroll">Contact</a></li>
    </ul>
</nav>

要更改 header ，我使用以下代码:

$(window).scroll(function(){
    if ($(window).scrollTop() >= 100) {
        $('.header').addClass('fixed');
        $(".top-nav").css("color", "grey");
        $(".logo").css("color", "grey");
    } 
    else {
        $('.header').removeClass('fixed');
        $("top-nav").css("color", "white");
        $(".logo").css("color", "white");
    }
});

Logo 文本的颜色变化很好，固定标题也适用，所以代码可以工作，我只是不知道如何指定应该更改顶部导航中的链接。

Answer 1

你可以将你的 JS 重写为

$(window).scroll(function(){
    if ($(window).scrollTop() >= 100) {
        $('.header').addClass('fixed');
        $(".top-nav>ul>li>a").css("color", "grey");
        $(".logo").css("color", "grey");
    } 
    else {
        $('.header').removeClass('fixed');
        $(".top-nav>ul>li>a").css("color", "white");
        $(".logo").css("color", "white");
    }
});

.top-nav>ul>li>a 将在 top-nav 中正确选择您的链接。

在 docs 中阅读更多关于 jQuery 选择器的信息或 here