将活动 class 添加到 nav 中的 ul 列表

Question

I am trying to add a position indicator to my nav bar using the snippet below (i.e. a border should appear when a list item is selected).目前，我的其余 css 代码使用 scss 以 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");
     })

Answer 1

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

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

Answer 2

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

nav 元素有两个 class 元素（navbar 和 navbar-main），因此您可以使用其中任何一个来开始选择。因为 jquery 将 active 的 class 添加到匹配的 link，所以 css 规则需要包含 a。要真正看到边框，您还需要设置 display 属性。经常使用的一个是 block 例如：

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

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

$(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");
    }
  });
});

Fiddle example

Answer 3

这对你有用。这就是我的使用方式。

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

将活动 class 添加到 nav 中的 ul 列表

Adding an active class to a ul list in nav

javascript

css

jquery

smooth-scrolling

nav