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

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). I currently have the rest of my css code nested using scss in the form nav{ li{/*code here */} a{/code here/}} and so on. When I add this active tag, nothing happens. Should I be formatting this differently with the active tag? Is there an easier way to do this? Why dosen't the active tag work? Thanks!!

我正在尝试使用下面的代码段向我的导航栏添加位置指示器(即,选择列表项时应出现边框)。我目前剩下的css代码嵌入了使用scss的形式导航{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;
}

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

2 个解决方案

#1

For starters the css is not targeting the element correctly. Your css is looking for an element with an id of nav, which doesn't exist.

对于初学者来说,css没有正确地定位元素。你的css正在寻找一个id为nav的元素,它不存在。

The nav element has two classes (navbar and navbar-main), so you can use either to start off the selection. Because the jquery is adding a class of active to a matching link, the css rule would need to include a. To actually see the border, you'd also need to set a display property. One that is used quite often is block e.g:

nav元素有两个类(navbar和navbar-main),因此您可以使用其中一个开始选择。因为jquery正在向匹配的链接添加一个active类,所以css规则需要包含一个。要实际查看边框,您还需要设置显示属性。经常使用的是例如:

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

In the example I've provided below, I've updated the jquery to target a specific link, just for illustration purposes.

在我下面提供的示例中,我更新了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");
    }
  });
});

Fiddle example

#2

Below code will find all <a> tag whose href attribute contains the current pathname.

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

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

#1