Active navigation menu for current url

Set the active/current menu link based or Url in Jquery:

suppose we have menu like:

 

<div class="nav">

 <ul>
 <li class="active"><a href="~/url1/">URL 1</a>
 <li><a href="~/url2/">URL 2</a>
 <li><a href="~/url3/">URL 3</a>
 </ul>

</div>
and user when clicked on URL 2 then item look as active :

$(function(){

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

     $('#nav a').each(function(){
            if(urlRegExp.test(this.href.replace(/\/$/,''))){
                $(this).addClass('active');
            }
        });

});

Advertisement