0

I have a navigation menu in a page that highlights the current menu you’re on based on the URL by adding a class.

My problem is that my page is paginated, so sometimes the user will end up at:

http://example.com:4001/wordpress/calientes/page/2/ , /page/3/ , /page/4/ and so on...

what’s the best way to keep my menu highlighted while the user is browsing the pages?

This is my menu:

<div class="innerhead">

<ul>

<code><li> <a href="http://example.com:4001/wordpress/calientes/">Calientes </a> </li>
<li><a href="http://example.com:4001/wordpress/tendencias/">Tendencias</a></li>
</code>
</ul>

</div>

This is the Script that use to highlight the current page menu:

<script>
$(function(){
    // this will get the full URL at the address bar
    var url = window.location.href; 

    // passes on every "a" tag 
    $(".innerhead a").each(function() {
            // checks if its the same on the address bar
        if(url == (this.href)) { 
            $(this).closest("li").addClass("active");
        }
    });
});
</script>
2
  • Close-voted as off-topic. As-written, this is a CSS/JS question, not a WordPress question. Per the WPSE FAQ, questions not specific to WordPress are out of scope, even if they happen in the context of WordPress*. Oct 13, 2013 at 23:00
  • 1
    I don't understand why you're adding the class after the menu is clicked... Anyway, if you want help here, you should show the PHP you're using to build the menu; and how this pagination is happening.
    – brasofilo
    Oct 14, 2013 at 0:07

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.