我正在嘗試更改導航欄鏈接的顏色。我希望每個按鈕在我點擊它們并且我在一個新頁面上時都有一個特定的顏色。我已經嘗試了一個腳本解決方案，以便根據我所在的頁面更改“活動”類。CSS 表上的代碼有效，因為它為具有“活動”類的鏈接提供了正確的顏色。但是我寫的腳本對我想要得到的改變沒有任何影響。
感謝您的幫助。
<!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 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="如何根據我們所在的頁面更改導航欄按鈕的顏色？（使用 Symfony）" width="auto" height="18">
<img src="../public/img/logo-gozpeak.png" alt="如何根據我們所在的頁面更改導航欄按鈕的顏色？（使用 Symfony）" width="auto" height="36" hljs-string">">
</a>
<button hljs-string">" 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 hljs-string">">
<a hljs-string">" href="{{ path('register') }}">S'inscrire</a>
</li>
<li hljs-string">">
<a hljs-string">" 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/[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>
uj5u.com熱心網友回復：
這是一個單頁應用程式還是為什么要通過 javascript 更改活動類？如果沒有，您的 javascript 將僅在單擊時更改類。這就是為什么你永遠看不到班級的變化，或者只是片刻。您可以通過當前路由設定 CSS 類，而不是腳本。
<li class="nav-item{% if app.request.get('_route') == 'home' %} active{% endif %}">
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/503890.html