CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3653474
user3653474

Reputation: 3854

Change menu item color on selection of menu item using jquery

I want to change color of menu item based on selection, for eg. In below code there is a on class if any menu item is selected i have to append on class to the li of menu. 

$('ul.nav li a').click(function(e){
  e.preventDefault();
  $('.nav ul li').each(function () {     
    $(this).parents('.nav').find('.on').removeClass('on').end().end().addClass('on');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li class="on">
    <a href="course_roadmap.php">
      Opt1
    </a>
  </li>
  <li>
    <a href="course_roadmap.php">
      Opt2
    </a>
  </li>
</ul>

Upvotes: 0

Views: 222

Answers (2)

RGS
RGS

Reputation: 5211

Try this:

$('ul.nav li').click(function(e){
  $(this).addClass('on').siblings().removeClass('on'); 
  var anchortext = $(this).find('a').text();  
  e.preventDefault();
});

Upvotes: 2

Preethi Mano
Preethi Mano

Reputation: 445

Try this 

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

Upvotes: 0

Related Questions