使用 jQuery 更改链接颜色（激活时）

Posted 2023-05-09

【中文标题】使用 jQuery 更改链接颜色（激活时）

【英文标题】：Change link color (when active) with jQuery

【发布时间】：2019-07-06 14:01:27

【问题描述】：

当它们处于活动状态时，我正在尝试更改导航栏中链接的颜色。所以基本上，如果我在“关于”上，我希望导航中的“关于”链接与其他链接具有不同的颜色。另外，我使用的是 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/

但是颜色没有改变，或者当它起作用时，链接不知何故死了（我点击它们但页面没有改变）。

我在这里做错了什么？

感谢您的帮助！

【问题讨论】：

您想将active 类添加到您当前所在的任何页面导航项。您还想使用nav-pills 或nav-tabs 之类的样式，否则active 不提供样式。例如：jsfiddle.net/97dL53n6getbootstrap.com/docs/4.0/components/navs

谢谢，它现在可以工作了，但我的链接仍然失效，我无法通过点击它们来更改页面。这是我第一次遇到这种情况，我不明白这个问题！

【参考方案1】：

我找到了一个和我想要的完全一样的解决方案，所以我想分享它！ :)

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

【参考方案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>

【讨论】：

感谢您的帮助，它不起作用但没关系，我找到了解决方案:)