Изменить цвет ссылки (если активен) с помощью jQuery

Question

Я пытаюсь изменить цвет ссылок в моей панели навигации, когда они активны.Поэтому, если я нахожусь в разделе «о», я бы хотел, чтобы ссылка «о» в моей навигации имела цвет, отличный от других ссылок.Также я использую Bootstrap 4.2.1.

. Для этого я сделал следующее:

<nav class="navbar sticky-top navbar-expand-lg container-fluid" id="navbar-main">
  <a class="navbar-brand" href="#"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse container" id="navbarSupportedContent">
    <ul class="container navbar-nav justify-content-around">
      <li class="nav-item">
            <a class="nav-link" href="../sections/index.php"><span>Accueil</span></a>
          </li>
          <li class="nav-item">
            <a href="../sections/presentation.php" class="nav-link navigation" ><span>Présentation</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link navigation" href="../sections/historique.php"><span>Historique</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link navigation" href="../sections/photos.php"><span>Photos des chats</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link navigation" href="../sections/contact.php"><span>Contact</span></a>
          </li> 
    </ul>
  </div>
</nav>

https://jsfiddle.net/Elena_/mwztr37y/4/

Но цвет не меняетсяили когда это работает, ссылки как-то не работают (я нажимаю на них, но страница не меняется).

Что я здесь не так делаю?

Спасибо за помощь!

Answer 1

Я нашел решение, которое работает именно так, как я хотел, поэтому я хотел поделиться им!:)

jQuery(function($) {
         var path = window.location.href;
         $('li a').each(function() {
          if (this.href === path) {
           $(this).addClass('active');
          }
         });
        });

Answer 2

Похоже, ваш CSS был нацелен на тег, но скрипт ссылался на тег li.

$( document ).ready(function() {
   $(".navbar .nav-item.active .nav-link").click(function () {
        
       $(".navbar .nav-item.active .nav-link").removeClass("selected");
       $(this).addClass("selected");
       return false;
   });
  });

.navbar {
    height: 80px;
    background-color: #F7E4E8;

}
.navbar a:hover {
    color: black;
    text-decoration: underline;
    text-underline-position: under;
}
.navbar .active {
	color: #0CF;
}
.navbar a {
    color: black;
}

.selected {
    color: white;
    text-decoration: underline;
    text-underline-position: under;
}

<nav class="navbar sticky-top navbar-expand-lg container-fluid" id="navbar-main">
  <a class="navbar-brand" href="#"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse container" id="navbarSupportedContent">
    <ul class="container navbar-nav justify-content-around">
      <li class="nav-item active">
            <a class="nav-link" href="../sections/index.php"><span>Accueil</span></a>
          </li>
          <li class="nav-item">
            <a href="../sections/presentation.php" class="nav-link navigation" ><span>Présentation</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link navigation" href="../sections/historique.php"><span>Historique</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link navigation" href="../sections/photos.php"><span>Photos</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link navigation" href="../sections/contact.php"><span>Contact</span></a>
          </li> 
    </ul>
  </div>
</nav>
    
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

<script>
  $( document ).ready(function() {
   $(".navbar .nav-item.active .nav-link").click(function () {
        
       $(".navbar .nav-item.active .nav-link").removeClass("selected");
       $(this).addClass("selected");
       return false;
   });
  });
</script>