rikket rikket - 6 months ago 24
HTML Question

Bootstrap menu change li active class on click

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

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

Comments