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.
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>
rahul
hi sir,
if i want to add active class to parent nav when on child pages in your jquery
Santosh Kumar Shah
You can use. .parent(li).parent(ul).parent(a) like this.
Rahul
active
Parent page- active1.html
Child page- active2.html
On parent page, there is form. On submit button it will go to child page. But i want active class show in parent page. But it remove from parent page.
rahul
”
parent
“
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;
}
});
Rahul
It’s not working