title: Bootstrap menu change li active class on click
body: <p>I have the following menu by bootstrap</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="navbar-collapse collapse"&gt;
    &lt;ul class="nav navbar-nav"&gt;
      &lt;li class="active" id="homeL"&gt;&lt;a data-scroll href="#Home"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li class="" id="workL"&gt;&lt;a data-scroll href="#Work"&gt;Work&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>how can I alter changing the <code>&lt;li&gt;</code> class to active when either home or work is clicked?</p>
  
  <p>The following isn't working for me</p>
  
  <pre><code>$("#homeL").on("click",function(){
    $(".nav navbar-nav li").removeClass("active");
    $(this).addClass("active");
  });
  </code></pre>