为什么 JQuery 不改变 CSS 类？

Question

有谁知道为什么下面的 JQuery 不能正常工作？当我单击导航栏中的链接时，我希望它更改样式（背景和字体颜色）：

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("ul li a").click(function(){
                    $(this).addClass("active");
                });
            });
        </script>

我确信 CSS 是正确的，因为当我将 class="active" 硬编码到 HTML 中时，它采用了正确的样式。但是，目前，当我单击导航栏中的任何链接时，导航栏中的所有链接都会闪入和闪出我希望刚刚单击的链接更改为的样式。希望这是有道理的。目前结果看起来类似于 CSS :active 选择器，但是当我点击导航栏中的 1 个链接时，所有链接都会闪烁。

这里是 HTML 元素：

            <li><a href="/">Home</a></li>
            <li><a href="/repository">Repository</a></li>
            <li><a href="/events">Events</a></li>
            <li><a href="/bio">Bio</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul> 

提前致谢。

如果它有所作为，我还在这个网站上使用 Flask 和 Bootstrap。 任何帮助，将不胜感激。如果一切顺利，这将是我的第一个网站。

Answer 1

请试试这个

$(document).ready(function(){
            $("li").find("a").on("click",function(){
                $(this).addClass("active");
            });
        });

Answer 2

你说过链接看起来像这样：

<ul class="navvy" id="responsive-navvy"><li><a href="/">Home</a></li>

并且您已经说过要关注该链接。

跟随那种链接会触发对服务器的请求，然后当收到响应时，浏览器会拆除页面的DOM（包括你对class所做的任何更改）并替换它解析新页面的 HTML 的结果。

您需要：

• 不要点击链接，或者
• 在页面加载时添加类以匹配加载页面的路径

看第一个：如果你不点击链接，那么当然没有对服务器的请求并且你没有得到响应；您必须以不同的方式更新页面。您可以使用replaceState 或pushState 在不更改页面内容的情况下更新URL，然后通过DOM 操作单独更改页面内容。

看第二个：如果您想跟随链接并让服务器驱动内容，您可以在页面加载时添加一些代码以突出显示相关的导航链接。大致如下：

$(function() {
    $("ul li a[href=" + location.pathname + "]").addClass("active");
});