使用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似乎以a标签为目标，但脚本引用了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>