Blog for web designers

Add class active on page refresh jquery

Add class active on page refresh jquery

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>

Santosh Shah

My name is Santosh Shah and blogs at santosh-shah.com


Reader Comments

  1. Let me say that my last statement was not quite accurate. It places an “active” class both in the parent and the child one, which then seems to deactivate the parent, so that the dropdown is no longer expanding.

  2. Really tks man!!! It worked for me too. However I didn´t saw the point of that:
    if (item.children(“ul”).length > 0) {
    var href = link.attr(“href”);
    link.attr(“href”, “#”);
    setTimeout(function () {
    link.attr(“href”, href);
    }, 300);
    e.preventDefault();
    }

  3. It worked great .. but I have a problem , in my case if I click a link it opens a page with one more link or action. When i click the same this last visited active class goes. Can u help me with the same.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.