CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
rikket
rikket

Reputation: 2407

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

Upvotes: 20

Views: 88475

Answers (6)

sachnr
sachnr

Reputation: 15

i found another workaround for this which is very easy to use.

  <div class="navbar-collapse collapse">
     <ul class="nav navbar-nav">
       <li class="<?php if($page=="home.html"){echo "active";} ?>"> id="homeL"><a data-scroll href="home.html">Home</a></li>
       <li class="<?php if($page=="about.html"){echo "active";} ?>"><a href="about.html">About</a></li>
       <li class="<?php if($page=="work.html"){echo "active";} ?>"> id="workL"><a data-scroll href="work.html">Work</a></li>
       <li class="<?php if($page=="contact.html"){echo "active";} ?>"><a href="contact.html">Contact</a></li>
    </ul>
  </div>

Upvotes: 0

SANTHOSH.SJ
SANTHOSH.SJ

Reputation: 441

Include this script

    <script type="text/javascript">
    $(function(){
        $('.nav a').filter(function(){
            return this.href==location.href}).parent().addClass('active').siblings().removeClass('active');

        $('.nav a').click(function(){
            $(this).parent().addClass('active').siblings().removeClass('active')    
            });
        });
</script>

Upvotes: 1

Kyuubido0
Kyuubido0

Reputation: 55

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

This is the solution that worked for me. I declared this to become active and remove the active class and also adding the .siblings() method that allows you to search for the siblings of the li elements in the document.

Upvotes: 1

Deaundrie Howard
Deaundrie Howard

Reputation: 41

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.

Upvotes: 4

Tharaka
Tharaka

Reputation: 2395

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

Upvotes: 39

Mark F
Mark F

Reputation: 176

one of your selectors is malformed, by looking at your html it looks like on the third line of the script that selector isn't doing what I think you want it to.

$("#homeL, #workL").click(function(){

  //$(".nav navbar-nav li") <-this is looking for a <li> inside a <navbar-nav>  
  // tag inside a tag with the class "nav"

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

Upvotes: 2

Related Questions