Меню Bootstrap меняет ли активный класс на клик

У меня есть следующее меню: bootstrap

HTML

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="active" id="homeL"><a data-scroll href="#Home">Home</a></li>
    <li><a href="#">About</a></li>
    <li class="" id="workL"><a data-scroll href="#Work">Work</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Как я могу изменить изменение класса <li> на активный, когда нажата кнопка "Дом или работа"?

Для меня не работает

$("#homeL").on("click",function(){
  $(".nav navbar-nav li").removeClass("active");
  $(this).addClass("active");
});

Ответ 1

ОБНОВЛЕНО

Ваши селектора css кажутся неправильными. Пожалуйста, попробуйте, как указано ниже,

<script>
    $(".nav li").on("click", function() {
      $(".nav li").removeClass("active");
      $(this).addClass("active");
    });

</script>

Я создал plunkr для этого здесь

Ответ 2

Попробуйте следующее:

$("ul li").on("click", function() {
    $("li").removeClass("active");
    $(this).addClass("active");
  });

Вам придется поиграть с ним с помощью ваших тегов. То, что помогло мне, объявило, что это стало активным, а затем удалив активный класс.

Ответ 3

один из ваших селекторов неверен, посмотрев на ваш html, он выглядит как на третьей строке script, который селектор не делает то, что, как я думаю, вы хотите.

$("#homeL, #workL").click(function(){

  //$(".nav navbar-nav li") <-this is looking for a <li> inside a <navbar-nav>  
  // tag inside a tag with the class "nav"

  $(".nav.navbar-nav li").removeClass("active");
  $(this).addClass("active");
});

Ответ 4

    $(".ul li").on("click", function() {
        $(this).siblings().removeClass('active');
        $(this).addClass("active");
    });

Это решение, которое сработало для меня. Я объявил, что это становится активным и удаляет активный класс, а также добавляет метод .siblings(), который позволяет вам искать братьев и сестер элементов li в документе.

Ответ 5

Включите этот script

    <script type="text/javascript">
    $(function(){
        $('.nav a').filter(function(){
            return this.href==location.href}).parent().addClass('active').siblings().removeClass('active');

        $('.nav a').click(function(){
            $(this).parent().addClass('active').siblings().removeClass('active')    
            });
        });
</script>

Ответ 6

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

<div class="navbar-collapse collapse">

"> id =" homeL "> Главная "> О "> id =" workL "> Работа "> Контакт