How to add active class to navigation items after the page url has changed

Question

How can I achieve having a navigation menu automatically detect where to append the class of active the following structure I have is...

<ul class="navigation-list">
    <li><a href="<?php echo $url; ?>">Home</a></li>
    <li><a href="<?php echo $url; ?>">How it works</a></li>
    <li><a href="<?php echo $url; ?>">Hire your...</a></li>
    <li><a href="<?php echo $url; ?>">Pricing</a></li>
    <li><a href="<?php echo $url; ?>">Themes</a></li>
    <li><a href="<?php echo $url; ?>">Features</a></li>
    <li><a href="<?php echo $url; ?>">Why us</a></li>
    <li><a href="<?php echo $url.'/blog/'; ?>">Blog</a></li>
</ul>

As you can see the Site is still under construction what I want to do is when you first visit the site the Home link will get a class of active like...

<li><a href="<?php echo $url; ?>" class="active">Home</a></li>

and then when you click... let's say how it works you would then be taken over to the how it works page and the nav would remove active from home and append it to how it works like...

<li><a href="<?php echo $url; ?>" class="active">How it works</a></li>

The $url parameter/tag outputs my url like http://www.example.com I have already tried this but it will not work...

$(".navigation-list li a").each(function() 
{   
    if (this.href.search(location.href) != -1)
    {
        $(this).addClass("active");
    }
});

I have now tried the following and it worked...

$(function(){
    var url = window.location.pathname, 
    urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");

    $('.navigation-list li a').each(function(){
        if(urlRegExp.test(this.href.replace(/\/$/,''))){
            $(this).addClass('active');
        }
    });
});

although when I use it, When i'm at //mysite.org all the links in the navigation become active and then when i go to //mysite.org/blog/ it only activates the blog nav item

possible duplicate of [How add class='active' to html menu with php](http://stackoverflow.com/questions/2913415/how-add-class-active-to-html-menu-with-php) — Kritner, Nov 03 '14 at 19:06
@Kritner it's not a duplicate they are trying to achieve it by PHP I want to achive it using Javascript or jQuery, I'm simply calling my url and echoing using $url — Web Developer, Nov 03 '14 at 19:08
Might be helpful to give some sample URLs for those who don't know PHP if it's a JS question. — RebelFist, Nov 03 '14 at 19:09
@WebDeveloper then http://stackoverflow.com/questions/4866284/jquery-add-class-active-on-menu — Kritner, Nov 03 '14 at 19:11
@Kritner Thanks that worked except when i'm on //example.com and the blog page is highlighted when that is located in //example.com/blog/ — Web Developer, Nov 03 '14 at 19:15
It sounds like you need your default of "mysite.org" to redirect to "mysite.org/home" or something similar — Kritner, Nov 03 '14 at 19:32
@Kritner Your link is a good one but the accepted answer is just too verbose and uses unnecessary conditionals and regex. The closest best answer would be this one which is close to mine http://stackoverflow.com/a/4866333/4155172 — , Nov 04 '14 at 17:27

How to add active class to navigation items after the page url has changed

0 Answers0