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

});

Edited version

$(document).ready(function() {
var str = location.href.toLowerCase();
$(".ddsmoothmenu li a").each(function() {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("li.active").removeClass("active");
$(this).parent().addClass("active");
}
});
});

Advertisements
Posted in Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Top Rated

Error: Twitter did not respond. Please wait a few minutes and refresh this page.

Blog Stats
  • 30,188 hits
%d bloggers like this: