Javascript 如何在页面url更改后向导航项添加活动类

如何实现导航菜单自动检测活动类的附加位置？以下结构是

<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>

我现在已经尝试了以下方法，并且效果很好

$(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');
        }
    });
});

---

虽然当我使用它时，当我在//mysite.org时，导航中的所有链接都会激活，然后当我转到//mysite.org/blog/时，它只会激活blog nav项

可能重复的@Kritner不是重复的，他们正试图通过PHP实现它，我想使用Javascript或jQuery实现它，我只是简单地调用我的url并使用$url进行回音，如果这是一个JS问题，那么为那些不懂PHP的人提供一些示例url可能会有所帮助。@RebelFist你是指我的网站url吗？@WebDeveloper

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

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

$(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');
        }
    });
});