How to change current-menu-item with jquery on ajax enabled wordpress site

4 Views

I’ve installed the Ajaxify WordPress Site (AWS) Plugin, and I am trying to change the current-menu-item class from one page to the next, as it would happen normally.

I’m using this jquery.

Read More
// highlight the current menu item
$(document).on('click', '.menu li', function(){   
    // Remove class on each item  
    $('.menu li').removeClass('current-menu-item');
    // Add class for this one    
    $(this).addClass('current-menu-item'); 
});

if I use 

 $('.menu li').removeClass('current-menu-item');

by itself, it removes the class as it should

if I use 

 $('.menu li').addClass('current-menu-item');

it adds the class to all of the items as it should.

The 

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

method also works on for other similar events on the script I’m using as well.

But when I put it all together and try to apply it to $(this), nothing happens.

Post Views: 4

Related posts

1 comment

  1. I figured it out!

    So for some reason I cant use a click event on the li but I can with the anchor inside of it. So from there all I had to do was target $(this) parent with the class name of .menu li.

    Here is the solution.

      $('.menu li a').on('click', function(){ 
        // Remove class on each item  
    $('.menu li').removeClass('current-menu-item');
    // Add class for this one    
    $(this).parent(".menu-item").addClass('current-menu-item'); 
    });

Comments are closed.