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>

要更改标题，请使用以下代码：

$(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");
    }
});

徽标文字的颜色变化很好，固定标题适用，所以代码有效，我只是不知道如何指定top-nav中的链接应该更改。

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或here

中详细了解jQuery中的选择器

Answer 2

我同意Lal，另一种方法是简单地将另一个类添加到你想要改变颜色的东西上。

HTML：

<li><a href="#home" class="scroll changeColor">Home</a></li>

jQuery的：

$(".changeColor").css("color", "white");

同样的事情，除非您可以根据需要更轻松地将课程添加到其他内容中，如果您不熟悉选择器的工作方式，则更容易处理。正如Lal所说，阅读它们，特别是如果你正在使用CSS或jQuery，你就是这样。

通过这样做，您可以将代码简化为：

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

您只需将changeColor类添加到徽标和链接中即可。对于许多人来说，这比处理元素的多个层更容易。

使用JS

2 个答案: