Question

您好我想问为什么我的代码不起作用。我在带有bootsrap和haml的轨道上使用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");
     })
});

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

从bootstrap到li元素添加活动类

2 个答案: