将活动类从引导程序添加到 li 元素

Question

您好，我想问一下为什么我的代码不起作用。我在带有 bootsrap 和 haml 的 Rails 上使用 ruby​​。

这是我的 javascript 代码：

:javascript
  $(".nav navbar-nav li a").click(function() {
    $(this).parent().addClass('active').siblings().removeClass('active');
  });

这是我的导航栏代码：

%nav.navbar.navbar-inverse
  .container-fluid
    .navbar-header
      %img.image{:alt => "Ruby Logo", :src => "http://www.rossconf.io/images/projects/ruby-2779abad.png"}
      = link_to "Users", users_path, class: 'navbar-brand'
      #bs-example-navbar-collapse-1.collapse.navbar-collapse
    %ul.nav.navbar-nav
      %li
        %a{:href => addresses_path}
          Addresses
          %span.sr-only (current)
      %li
        %a{:href => imports_path}
          Import addresses
          %span.sr-only (current)
      - if current_user     
        %li
          %a{:href => logout_path}
            Logout
            %span.sr-only (current)
      - else
        %li
          %a{:href => login_path}
            Login
            %span.sr-only (current)

知道为什么它运行时没有错误但没有任何反应吗？活动类未添加到 li 元素。

Answer 1

我猜你的代码有错误：

应该是：

$(".nav.navbar-nav li a").click(function() {
//-----^^-------missed a class selector here and you can see a space too 
    $(this).parent().addClass('active').siblings().removeClass('active');
}); 

Answer 2

首先你错过了在选择器中加入班级。第二件事是，如果您想在单击链接时添加活动类，那么有两种可能的解决方案：-

第一个解决方案是

$(".nav .navbar-nav li a").click(function(event) {
  event.preventDefault();
    $(this).parent().addClass('active').siblings().removeClass('active');
  });

第二个解决方案是：-

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

如果我错了，不符合要求，请告诉我