单击Bootstrap菜单更改li活动类

Question

我有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");
});

Answer 1

更新

你的css选择器似乎是错的.请尝试如下,

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

</script>

我在这里创建了一个plunkr