, LLC.

Highlight the Current Page with jQuery, CSS &  PHP

Here’s a common web development scenario: How do we highlight the current page in a navigation seamlessly and dynamically? The answer is jQuery.

See a Live Demo

My recipe for this common scenario involves a mixture of CSS and JavaScript with a dash of jQuery.


<ul id="navigation">
    <li><a href="about-us.html">about us</a></li>
    <li><a href="our-products.html">our products</a></li>
    <li><a href="blog.html">blog</a></li>
    <li><a class="active" href="login.html">login</a></li>
    <li><a class="active" href="contact.html">contact</a></li>

JavaScript / jQuery

    $page = jQuery.url.attr("file");
    if(!$page) {
        $page = 'index.html';
    $('#navigation li a').each(function(){
        var $href = $(this).attr('href');
        if ( ($href == $page) || ($href == '') ) {
        } else {


You’ll need a copy of jQuery, along with a copy of the jQuery URL Parser plugin.

After you include jQuery, and the URL Parser add the JavaScript snippet above to the <head> section of your document.

How it works

What we do here is simple, we grab the current name of the page, for example about.html. Then we check out ul.navigation <ul> to see if any of the anchors contain an href attribute with that value. If any of the links are a match we flag the parent of the anchor with a CSS class. In this case I’ve chosen current to keep things self explanatory.


In this case I chose to add the “current” class to the <li> rather than to the anchor. Usually I will create a navigation using CSS sprite techniques, and this allows me greater control over the presentation of that element. This can come in handy for rounded corners or tabs.

Meet the Author

Kevin Leary, WordPress Consultant

I'm a freelance web developer and WordPress consultant in Boston, MA with 16 years of experience building websites and applications. View a portfolio of my work or request an estimate for your next project.