我正在尝试改变颜色我的导航栏链接。我希望每个按钮有一个特定的颜色，当我点击他们，我在一个新的页面。我已经尝试了一个解决方案与脚本，以改变“活动”类根据我的网页。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>
1条答案
按热度按时间owfi6suc1#
这是一个单页应用程序，还是你为什么要用javascript来改变活动类？如果不是，你的javascript只会在点击时改变类。这就是为什么你永远看不到类的变化，或者只是一会儿。你可以用脚本代替当前路径来设置CSS类。