将活动类添加到导航中的 ul 列表中

Adding an active class to a ul list in nav

本文关键字：ul 列表 导航 活动 添加      更新时间：2023-09-26

我正在尝试使用下面的代码片段向我的导航栏添加位置指示器（即选择列表项时应出现边框）。我目前使用 scss 嵌套了其余的 css 代码，形式为 nav{ li{/*code here */} a{/code here/}} 等等。当我添加此活动标签时，没有任何反应。我应该使用活动标签以不同的方式格式化吗？有没有更简单的方法可以做到这一点？为什么活性标签不起作用？谢谢！！

.HTML

<nav class="navbar navbar-main"> 
    <ul class="top-menu">
    <li id="home"><a href="#">HOME</a></li>
    <li id="about"><a href="#about">ABOUT</a></li>
    <li id="info"><a href="#media">MEDIA</a></li>
    <li id="social"><a href="#social">SOCIAL</a></li>
    </ul>
  </nav>

.CSS

#nav ul li .active {
border-bottom:3px #FFF solid;
}

.JS

$(function() {
     var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
     $("#nav ul li a").each(function(){
          if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
          $(this).addClass("active");
     })

对于初学者来说，css 没有正确定位元素。您的 css 正在寻找一个具有 nav id的元素，该元素不存在。

nav 元素有两个类（navbar 和 navbar-main ），因此您可以使用其中任何一个来开始选择。由于 jquery 正在向匹配的链接添加一类active，因此 css 规则需要包含a 。若要实际查看边框，还需要设置 display 属性。经常使用的一种是block例如：

.navbar ul li a.active {
  display:block;
  border-bottom:3px #FFF solid;
}

在下面提供的示例中，我更新了 jquery 以针对特定链接，仅用于说明目的。

$(document).ready(function() {
  var pgurl = "#about"; //Using a static value for illustration purposes.
  $(".navbar ul li a").each(function(){
    if($(this).attr("href") == pgurl || $(this).attr("href") == '' ) {
      console.log($(this).attr("href"));
      $(this).addClass("active");
    }
  });
});

小提琴示例

下面的代码将找到href属性包含当前路径名的所有<a>标签。

$(function () {
        $("a[href*='" + location.pathname + "']").addClass("active");
})

这将为你工作。这就是我使用我的的方式。

$(document).ready(function () {
      $(".top-menu > li > a[href*='" + location.pathname + "']").addClass('active'); //the .top-menu is your ul class
});(jQuery);
相关文章：