從bootstrap添加活動類到li元素

你好，我想問爲什麼我的代碼不工作。我用靴子和哈姆在軌道上使用紅寶石。從bootstrap添加活動類到li元素

這裏是我的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元素中。

來源

2015-10-13 Titas Kurtinaitis

可以共享生成html –

我想有一個在你的代碼的錯誤：

它應該是：

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

來源

2015-10-13 09:50:07

黯然，但仍然li元素是不上課的時候我去到該選項卡。 –

使用$（this）.parent（）。addClass（'active'）並檢查是否可以在您的dom檢查器中看到該類。 –

首先你錯過選擇了加盟類。第二件事情是，如果你想添加活動類當你點擊鏈接則有兩種可能的解決方案是： -

首個解決方案是

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

請告訴我，如果我錯了，不符合要求

來源

2015-10-13 10:03:12

我已經嘗試了第一個解決方案，因爲其他人告訴過我。不幸的是，第二種解決方案也不能工作。它很好的提到，我在本地主機上工作，但我認爲問題不在這裏。不知道下一步該怎麼做... –

請你能告訴你，當你點擊菜單項時鏈接改變了。第二個解決方案只有在你的鏈接改變時纔有效。 –

請參閱此答案[鏈接]（http://stackoverflow.com/questions/20060467/add-active-navigation-class-based-on-url） –

從bootstrap添加活動類到li元素

回答

相關問題