将活动类从bootstrap添加到li元素

Adding active class from bootstrap to li element

本文关键字：li 元素 添加 bootstrap 活动      更新时间：2023-09-26

你好，我想问为什么我的代码不工作。我在rails上使用ruby，带有bootstrap和haml。

下面是我的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)

知道为什么它运行没有错误，但什么都没有发生吗?

我猜你的代码有错误:

应该是:

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

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

第一个解是

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

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

相关文章：