我正在尝试更改导航栏链接的颜色。我希望每个按钮都有一个特定的颜色，当我点击它们，我在一个新的页面上。我已经尝试了脚本的解决方案，以便更改"；活动的"；根据我所在的页面分类。CSS表上的代码可以工作，因为它为具有"的链接提供了正确的颜色；活动的"；班但我写的剧本并没有对我想要的改变产生任何影响。
谢谢你的帮助。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
{# Bootstrap CSS #}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
{# Google fonts #}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
{# Style CSS #}
<link href="../assets/styles/style.css" rel="stylesheet" type="text/css">
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
</head>
<body>
<header class="fixed-top">
<nav class="navbar navbar-expand-md bg-light">
<a class="navbar-brand px-4" href="{{ path('home') }}">
<img src="../public/img/home-icon.png" alt="Homepage" width="auto" height="18">
<img src="../public/img/logo-gozpeak.png" alt="Logo Go Zpeak !" width="auto" height="36" class="d-inline-block align-text-top">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto px-4">
<li class="nav-item">
<a class="nav-link" href="{{ path('login') }}">Se connecter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('register') }}">S'inscrire</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg width="20" height="15" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.4593 12.9475C16.5819 11.2051 17.0205 9.10907 16.6906 7.06249C16.3609 5.01606 15.286 3.16389 13.6728 1.86245C12.0596 0.560713 10.0221 -0.098306 7.95228 0.0118859C5.88235 0.122097 3.92651 0.993827 2.46058 2.45945C0.994656 3.92507 0.122641 5.88092 0.011954 7.95076C-0.0985539 10.0207 0.560172 12.0584 1.86146 13.6717C3.16274 15.285 5.01475 16.3603 7.06111 16.6904C9.10754 17.0206 11.2038 16.5824 12.9465 15.4601L16.9529 19.466C17.2848 19.8053 17.7386 19.9978 18.2134 20.0004C18.6881 20.003 19.1441 19.8156 19.4797 19.4799C19.8154 19.1442 20.0026 18.6881 20 18.2134C19.9973 17.7388 19.8048 17.2848 19.4654 16.953L15.4593 12.9475ZM2.27089 8.42409C2.27089 6.79234 2.91905 5.22749 4.07279 4.07353C5.22669 2.91979 6.79149 2.27162 8.42335 2.27162C10.0552 2.27162 11.6199 2.91979 12.7739 4.07353C13.9277 5.22742 14.5758 6.79223 14.5758 8.42409C14.5758 10.0559 13.9277 11.6207 12.7739 12.7746C11.62 13.9284 10.0552 14.5766 8.42335 14.5766C6.79218 14.5748 5.2284 13.926 4.07508 12.7726C2.92176 11.6191 2.27287 10.0553 2.27108 8.42428L2.27089 8.42409Z" fill="black"/>
</svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg width="16" height="15" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 1.10526C0 0.494843 0.494843 0 1.10526 0H14.8947C15.5052 0 16 0.494843 16 1.10526V1.10526C16 1.71568 15.5052 2.21053 14.8947 2.21053H1.10526C0.494843 2.21053 0 1.71568 0 1.10526V1.10526Z" fill="black"/>
<path d="M0 7C0 6.38958 0.494843 5.89474 1.10526 5.89474H14.8947C15.5052 5.89474 16 6.38958 16 7V7C16 7.61042 15.5052 8.10526 14.8947 8.10526H1.10526C0.494843 8.10526 0 7.61042 0 7V7Z" fill="black"/>
<path d="M0 12.8947C0 12.2843 0.494843 11.7895 1.10526 11.7895H14.8947C15.5052 11.7895 16 12.2843 16 12.8947V12.8947C16 13.5052 15.5052 14 14.8947 14H1.10526C0.494843 14 0 13.5052 0 12.8947V12.8947Z" fill="black"/>
</svg>
</a>
</li>
</ul>
{# Bootstrap JavaScript #}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$('ul.navbar-nav > li').click(function (e) {
$('ul.navbar-nav > li').removeClass('active');
$(this).addClass('active');
});
});
</script>
</div>
</nav>
</header>
{% block main %}{% endblock %}
</body>
</html>
这是一个单页应用程序吗？或者为什么要用javascript更改活动类？否则，您的javascript将仅在单击时更改类。这就是为什么你从来没有看到班级的变化，或者只是一瞬间。您可以通过当前路由设置CSS类，而不是脚本。
<li class="nav-item{% if app.request.get('_route') == 'home' %} active{% endif %}">