Bootstrap menu change li active class on click

Question

I have the following menu by 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>

how can I alter changing the <li> class to active when either home or work is clicked?

The following isn't working for me

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

Answer 1

UPDATED

Your css selectors seems to be wrong. Please try as given below,

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

</script>

I have created a plunkr for this here

Answer 2

Try this:

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

You will have to play around with it with your given tags. What helped me was declaring this to become active, then removing the active class.