CODEWITHSUNDEEP
jquerycss
user3163213
user3163213

Reputation: 701

How do I add active class to this menu item?

I am trying to add an active class to this submenu item.

Menu item-

<ul class="mainnav ">
  <li class="active"><a href="/Home/Index"><i class="icon-home"></i></a></li>
  <li><a href="#"><i class="icon-upload" id="upload-card"></i></a></li>
  <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-search"></i></a>
  </li>
  <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-plus"></i></a>                               
  </li>
</ul>

There is already active class is added on first li item. I am trying to remove this class from siblings on click of current active menu item.

This is what I tried-

<script type="text/javascript">
     $(function () {
         $('ul .mainnav > li').click(function () {
             $(this).siblings().removeClass('active').addClass('active');
         });    
     });
</script>

But this is not working.

Thanks for help.

Upvotes: 0

Views: 160

Answers (1)

CRABOLO
CRABOLO

Reputation: 8793

Try this

   $('.mainnav li').click(function () {
         $(this).siblings().removeClass('active')
         $(this).addClass('active');
    });

Working example. http://jsfiddle.net/CgSwt/

Upvotes: 3

Related Questions