Set active state on navigation dynamically

Question

I seem to run into this problem frequently and can never find a solution. I have a Wordpress site with a top navigation. Since this is in my header.php, and used on all page

Answer 1

You can do this way:

This will add the active class to the which contains the page from the url.

$(function(){
   var url = window.location.href;
   var page = url.substr(url.lastIndexOf('/')+1);
   $('.cemenu a[href*="'+page+'"]').addClass('active');
});

and if you want to add class to its parent li the replace the last line to this and css class should be like this:

.active a{
      css 
      properties 
      for active li's a
}

 // using closest
$('.cemenu a[href*="'+page+'"]').closest('li').addClass('active'); 

or

// using parent
$('.cemenu a[href*="'+page+'"]').parent('li').addClass('active');

just tryout the fiddle here