CODEWITHSUNDEEP
jquery
Pawan
Pawan

Reputation: 32321

How to add class to the currently clicked elemnt on the menu item

Once clicked on the menu item , i am trying to remove the class active of the previous one , and trying to add it to the current clicked elemnt .

But could you please let me know what i am doing wrong in this case

https://jsfiddle.net/x1f5n9qo/1/

    $(document).on('click', '.res', function(event)
    {

     $('.menu .res').removeClass('active');
        $(this).addClass('active');

var activeslidenumber = $(this).index();    

alert(activeslidenumber);

    });

Upvotes: 1

Views: 720

Answers (2)

Andi AR
Andi AR

Reputation: 2898

Try this

  1. Write click for menu li's .res li.
  2. Remove all active. $(".res li a").removeClass('active');

  3. then add current active $(this).addClass('active');

        $(document).on('click', '.res li', function(event)
    {            

    $(".res li a").removeClass('active');
    $(this).find('a').addClass('active')    
    var activeslidenumber = $(this).index();        
    alert(activeslidenumber);    

    });

Upvotes: 0

JGV
JGV

Reputation: 5187

Here is a possible solution:

  • In your anchor element, add a class called "menu-item"
  • Handle the click event of "menu-item" and set the active class on it
  • Also, add closing tag for the </ul> (it was missing in your fiddler code)

Fiddler: https://jsfiddle.net/x1f5n9qo/6/

HTML

     <div class="top-nav">
         <span class="menu"> <img src="images/icon.png" alt=""></span>
           <ul class="res">
              <li ><a class="menu-item active" href="#">One</a></li>
              <li><a class="menu-item" href="#">Two</a></li>
              <li><a class="menu-item" href="#">Three</a></li>
           </ul>           
     </div>

JS

$(document).on('click', '.menu-item', function(event)
{    
    $('.res .menu-item').removeClass('active');
    $(this).addClass('active');  

});

And here is another simple solution: https://jsfiddle.net/x1f5n9qo/9/

Upvotes: 1

Related Questions