Add class active on page refresh jquery

jQuery 7 Comment

In this post you will learn how to add class active on page refresh jquery only. Sometimes in a dynamic page we have only one single page for menu markup. Its not possible to add class “active” in a HTML method. There are lots of ways to do this. PHP does it well. But in this post we are going to accomplish this mission of adding class without having to touch on server side scripting. It can be done with simple few lines of jquery code.

How to add class active on page refresh jquery only

Jquery CDN script URL
Paste this script inside the head tag.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Below how the HTML script should be placed inside the HTML. Generally script files are kept at the bottom of the page to load fast. Load fast doesn’t mean your jquery will load fast. It means that when you keep the jquery file at the top, the rest of the HTML will not load until the jquery load first. This can messed up your design while loading. So its better to place the script at the bottom. But in this post we don’t have a lot of content so we added the jquery inside head tag.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery active class</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<ul>
    <li><a href="active.html">active</a></li>
    <li><a href="active2.html">Active2</a></li>
    <li><a href="active3.html">Active3</a></li>
</ul>
</body>
</html>

Create a new file called custom.js and add the below script inside it. Don’t forget to replace the $("ul a") with your own.


jQuery(function ($) {
    $("ul a")
        .click(function(e) {
            var link = $(this);

            var item = link.parent("li");
            
            if (item.hasClass("active")) {
                item.removeClass("active").children("a").removeClass("active");
            } else {
                item.addClass("active").children("a").addClass("active");
            }

            if (item.children("ul").length > 0) {
                var href = link.attr("href");
                link.attr("href", "#");
                setTimeout(function () { 
                    link.attr("href", href);
                }, 300);
                e.preventDefault();
            }
        })
        .each(function() {
            var link = $(this);
            if (link.get(0).href === location.href) {
                link.addClass("active").parents("li").addClass("active");
                return false;
            }
        });
});

You final markup should be.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>active 1</title>
    <style>
        .active a { color: red; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/custom.js" type="text/javascript"></script>
</head>
<body>
<ul>
    <li><a href="active.html">active</a></li>
    <li><a href="active2.html">Active2</a></li>
    <li><a href="active3.html">Active3</a></li>
</ul>
</body>
</html>

7 thoughts on “Add class active on page refresh jquery


  1. rahul

    hi sir,
    if i want to add active class to parent nav when on child pages in your jquery

  2. rahul

    sir please help me on this

    • Santosh Kumar Shah

      Try this way..


      .each(function() {
      var link = $(this);
      if (link.get(0).href === location.href) {
      link.addClass("active").parents("li").addClass("active");
      link.addClass("active").parents("li").parent("li").addClass("active");
      return false;
      }
      });

  3. Rahul

    It’s not working

Leave a Reply

Your email address will not be published. Required fields are marked *