I am trying to change color my navbar links. I want that each button have a specific color when I click on them and I am on a new page. I already tried a solution with script in order to change "active" class according to the page I am. The code on CSS sheet works, because it gives the right color for the link that has "active" class. But the script I wrote doesn't has no effect for change I am trying to get.
Thank you for helping.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<link rel="icon" href="data:image/svg xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><text y="1.2em" font-size="96">⚫️</text></svg>">
{# Bootstrap CSS #}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 >
<nav >
<a 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" >
</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarNav">
<ul >
<li >
<a href="{{ path('login') }}">Se connecter</a>
</li>
<li >
<a href="{{ path('register') }}">S'inscrire</a>
</li>
<li >
<a 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 >
<a 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/[email protected]/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>
CodePudding user response：
Is this a single page app or why you will change the active class by javascript? If not, your javascript will change the classes only on click. Thats why you never see the changes of the class, or just for a moment. Instead of a script you can set the CSS class by the current route.
<li >