Активный элемент Navbar не остается активным после щелчка

Question

У меня есть следующий Navbar:

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 

    <ul class="nav navbar-nav navbar-right"> 
     <li><%= link_to 'Home', welcome_index_path %></li> 
     <li><%= link_to 'Projects', projects_path %> </li> 
     <li><%= link_to 'Users', users_path %> </li> 
    </ul> 
    </div> 
</nav> 

И это JQuery, чтобы изменить выбранный элемент, основанный на щелчок, где .selectednav имеет background-color: black:

<script> 
    $(document).ready(function() { 
     $("li").click(function(){ 
      $(this).addClass("selectednav"); 
      $(this).siblings().removeClass("selectednav"); 

     }); 
    }); 
</script> 

Однако , после нажатия на элемент навигации, класс .selectednav применяется только к элементу на мгновение перед исчезновением.

Единственный способ, которым я нашел, чтобы решить эту проблему, является путем удаления следующей строки из HTML:

<ul class="nav navbar-nav navbar-right">

Но это, конечно, губит мой стиль, и я предпочел бы это здесь, чтобы соответствовать с остальной базой бутстрапов.

Я также попытался использовать класс Bootstrap active, но с тем же результатом (удаление объявления ul устраняет проблему, но ломает мой стиль).

Может кто-нибудь скажет мне, что здесь происходит, или что может быть причиной этого?

Похоже, что страница перенаправляется на ссылку после того, как меняет класс, класс selectednav сбрасывается до того, что изначально было изначально.

Answer 1

У вас нет проблем с вашим.

$(this).addClass("selectednav"); 
$(this).siblings().removeClass("selectednav"); 

Они работают нормально со мной.

Существует еще один способ решения этой задачи. Я приготовил маленькую скрипку.

Адрес a link. Здесь я удаляю класс текущего элемента из всех li, а затем применяю его к текущему элементу.

Вы можете взглянуть, и тогда вы поймете это лучше.

Надеюсь, что это поможет.

Answer 2

Я думаю, это может помочь!

<script> 
    $(document).ready(function() { 
     $("nav li a").click(function(){ 
      $(this).addClass("selectednav"); 
      $(this).siblings().removeClass("selectednav"); 
     }); 
    }); 
</script> 

Answer 3

просто заменить этот код просто изменить класс от «selectednav» к «активным»:

$(document).ready(function() { 
 
     $("li").click(function(){ 
 
      $(this).addClass("active"); 
 
      $(this).siblings().removeClass("active"); 
 

 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>