时间戳

首页 > 解决方案 > 当我只有空的href时，导航栏活动链接颜色会改变

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

问题描述

我想在点击后更改活动链接颜色。当我在 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>

标签： javascripthtmljquerynavbarbootstrap-5

解决方案

也许您可以尝试使用纯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>

推荐阅读