Question

I have a navigation menu like:

<div class="my_menu">
  <ul>
    <li><a href="http://localhost/en/about-us">About Us</a></li>
    <li><a href="http://localhost/en/contact">Contact</a></li>
  </ul>
</div>

I am trying to write a function to add some active class to the menu when it matches with page url.

$(".top_navigation li a").filter(function() {
    alert($(this).href);
    alert($(location).attr('href'));
    return $(this).href() === $(location).attr('href');
  }).addClass('newClass');

Where I am doing wrong?

Answer 1

Here’s a small, slightly simpler jQuery snippet that should do what you’re expecting:

$(".topnavigation li a").each(function() {
    if($(this).attr("href") == window.location) {
        $(this).addClass("newClass");
    }
});

Demo: little link.

I hope that helped you!