导航栏活动链接的颜色改变，当我有空的href

Question

我想在点击后改变活动链接的颜色。当我在开始链接时，我想用另一种颜色开始写作等等。我有几个链接= "#"因为我还没有这样做，但我的代码只在这些情况下工作，例如:当我点击"O HODOWLI"那么START的颜色和之前一样，但是"O HODOWLI"应该是。当我点击"KOCIĘTA"这部分应该用另一种颜色。所以当我有"#">

js:

$(document).ready(function () { 
$("ul.navbar-nav > li").click(function (e) {
$("ul.navbar-nav > li").removeClass("active");
$(this).addClass("active");}) });

html:

<nav class="navbar navbar-expand-xl navbar-light ">
<button class="navbar-toggler small-screen-navbar" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false" aria-label="Przełącznik nawigacji">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="mainmenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/start"> START </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/o_hodowli"> O HODOWLI </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> KOCIĘTA </a>
</li>
<li class="nav-item">
<a class="nav-link " href="#"> NASZE KOTY </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/opieka"> OPIEKA NAD KOTAMI </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OPINIE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/kontakt"> KONTAKT </a>
</li>
</ul>
<ul class="navbar-nav sm-icons">
<li class="nav-item"><a class="nav-link" href="https://www.facebook.com/11891824050249/">
<i class="fab fa-facebook-square icon"></i></a>
</li>
</ul>
</div>

Answer 1

也许你可以尝试使用纯js:

const links = document.querySelectorAll('.nav-link')
links.forEach(link => {
link.addEventListener('click', (e) => {
links.forEach(link =>  link.classList.remove('active'))
e.target.classList.add('active')
})
})

.active {
color: red;
}

<nav class="navbar navbar-expand-xl navbar-light ">
<button class="navbar-toggler small-screen-navbar" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false" aria-label="Przełącznik nawigacji">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="mainmenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link active" href="/start"> START </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/o_hodowli"> O HODOWLI </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> KOCIĘTA </a>
</li>
<li class="nav-item">
<a class="nav-link " href="#"> NASZE KOTY </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/opieka"> OPIEKA NAD KOTAMI </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OPINIE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/kontakt"> KONTAKT </a>
</li>
</ul>
<ul class="navbar-nav sm-icons">
<li class="nav-item"><a class="nav-link" href="https://www.facebook.com/11891824050249/">
<i class="fab fa-facebook-square icon"></i></a>
</li>
</ul>
</div>