rikket rikket - 2 years ago 86
HTML Question

Bootstrap menu change li active class on click

I have the following menu by bootstrap


<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>

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

The following isn't working for me

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

Answer Source


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

    $(".nav li").on("click", function() {
      $(".nav li").removeClass("active");


I have created a plunkr for this here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download