book now on khaalipaper Best hindi blog and story website

Add .active class to current navigation based on URL

How to get the URL of the current page using and adding an active class to navigation based on URL. With the jQuery find the best way to the highlight the active section in the navigation menu.

Active link

The following example will show you how to find the current page URL using jQuery.:-

  jQuery(function($) {
      var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
        $(".navbar-nav > li > a").each(function(){
        if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
        // $(this).parent("li").addClass("active");

Add active class to menu

Based on navigation structure you can write the jquery, here .active class add to .navbar-nav > li > a, so depends on menu write code.

You can customize this code further as per your requirement.