当我只有空的href时，导航栏活动链接颜色会改变答案

【问题标题】：Navbar active link color change when I have empty href only当我只有空的href时，导航栏活动链接颜色会改变
【发布时间】：2021-10-22 20:22:15
【问题描述】：

我想在点击后更改活动链接的颜色。当我在 START 链接上时，我希望 START 用另一种颜色等书写。我的链接很少=“#”因为我还没有完成，但我的代码仅在这些情况下有效，f.ex：当我单击“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>

【问题讨论】：

标签： javascript html jquery navbar bootstrap-5

【解决方案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>

【讨论】：