не может изменить класс элемента Li щелкать его в рельсах

Question

я в настоящее время включены следующие в моей application.html.erb

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
<%= javascript_include_tag 'customjsFile', 'data-turbolinks-track' => true %> 

и разместил мой JavaScript «customjsFile» в «/ приложение/активов // javascripts ".

<div class="container-fluid"> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="http://localhost:3000/home" onclick="f1()">HOME</a></li> 
     <li><a href="http://localhost:3000/contests">CONTESTS</a></li> 
     <li><a href="http://localhost:3000/professors">PROFESSORS</a></li> 
     <li><a href="http://localhost:3000/challenges">BLOG</a></li> 
     <li><a href="http://localhost:3000/about">ABOUT</a></li> 

     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 

Теперь я хочу удалить существующий «активный» класс и добавить «активный» класс к элементу, нажав на элемент li. Я добавил следующий код в моем customjsFile

$(document).ready(function() { 
    $('.nav li a').click(function(e) { 
     alert("Clicked"); 
     $('.nav li').removeClass('active'); 

     var $parent = $(this).parent(); 
     if (!$parent.hasClass('active')) { 
      $parent.addClass('active'); 
     } 
    }); 
}); 

но щелкать элемент «LI», это не перенаправляют «HREF» от «A» тега я попытался добавить следующий код customjsFile.js

$(document).on("click", "a", function(){ 
    window.location.href = $(this).attr('href'); 

}); 

, но затем я перенаправлены на «HREF» из щелкнули «элемента», но мой активный класс не изменится к щелкнули «LI», а остается такой же

Answer 1

Вы должны слушать page:change события , быть cuase вы используете turbolinks:

$(document).on('page:change', function() { 
    $('.nav li a').click(function(e) { 
    ... 

Answer 2

Когда вы делаете: $('.nav li').removeClass('active');, это означает, что вы выбираете все элементы с именем класса nav и содержит <li> и удалить имя класса active из них.

Я подозреваю, что вам нужно, чтобы удалить имя класса active только из текущего щелкнутого элемента, и поэтому использовать $(this):

$(document).ready(function() { 
     $('.nav li a').click(function(e) { 
      e.preventDefault(); 
      var $parent = $(this).parent(); 
      $parent.removeClass('active'); 

}); 

Примечания: Не забывайте, чтобы предотвратить поведение якоря по умолчанию. и я думаю, что ваш элемент li должен иметь начальное имя класса, кроме active. Попробуйте также почитать о: .toggleClass()