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 \u201cactive\u201d 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.<\/p>\n
Jquery CDN script URL
\nPaste this script inside the head tag.<\/p>\n
\n<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js\"><\/script>\n<\/code><\/pre>\nBelow 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\u2019t 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\u2019t have a lot of content so we added the jquery inside head tag.<\/p>\n
\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Jquery active class<\/title>\n <script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js\"><\/script>\n<\/head>\n<body>\n<ul>\n <li><a href=\"active.html\">active<\/a><\/li>\n <li><a href=\"active2.html\">Active2<\/a><\/li>\n <li><a href=\"active3.html\">Active3<\/a><\/li>\n<\/ul>\n<\/body>\n<\/html>\n\n<\/code><\/pre>\nCreate a new file called custom.js and add the below script inside it. Don\u2019t forget to replace the $(\"ul a\")<\/code> with your own.<\/p>\n\njQuery(function ($) {\n $(\"ul a\")\n .click(function(e) {\n var link = $(this);\n\n var item = link.parent(\"li\");\n \n if (item.hasClass(\"active\")) {\n item.removeClass(\"active\").children(\"a\").removeClass(\"active\");\n } else {\n item.addClass(\"active\").children(\"a\").addClass(\"active\");\n }\n\n if (item.children(\"ul\").length > 0) {\n var href = link.attr(\"href\");\n link.attr(\"href\", \"#\");\n setTimeout(function () { \n link.attr(\"href\", href);\n }, 300);\n e.preventDefault();\n }\n })\n .each(function() {\n var link = $(this);\n if (link.get(0).href === location.href) {\n link.addClass(\"active\").parents(\"li\").addClass(\"active\");\n return false;\n }\n });\n});\n\n<\/code><\/pre>\nYou final markup should be.<\/p>\n
\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>active 1<\/title>\n <style>\n .active a { color: red; }\n <\/style>\n <script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js\"><\/script>\n <script src=\"js\/custom.js\" type=\"text\/javascript\"><\/script>\n<\/head>\n<body>\n<ul>\n <li><a href=\"active.html\">active<\/a><\/li>\n <li><a href=\"active2.html\">Active2<\/a><\/li>\n <li><a href=\"active3.html\">Active3<\/a><\/li>\n<\/ul>\n<\/body>\n<\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"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 \u201cactive\u201d in a HTML method. There are lots of ways to do this. PHP does it well. But in […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-79","post","type-post","status-publish","format-standard","hentry","category-jquery"],"yoast_head":"\n
Add class active on page refresh jquery - Santosh Kumar Shah<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/santosh-shah.com\/blog\/add-class-active-on-page-refresh-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add class active on page refresh jquery - Santosh Kumar Shah\" \/>\n<meta property=\"og:description\" content=\"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 \u201cactive\u201d in a HTML method. There are lots of ways to do this. PHP does it well. But in […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/santosh-shah.com\/blog\/add-class-active-on-page-refresh-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Santosh Kumar Shah\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-30T11:03:56+00:00\" \/>\n<meta name=\"author\" content=\"Santosh Kumar Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Santosh Kumar Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/add-class-active-on-page-refresh-jquery\/\",\"url\":\"https:\/\/santosh-shah.com\/blog\/add-class-active-on-page-refresh-jquery\/\",\"name\":\"Add class active on page refresh jquery - Santosh Kumar Shah\",\"isPartOf\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\"},\"datePublished\":\"2020-06-30T11:03:56+00:00\",\"author\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\"},\"breadcrumb\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/add-class-active-on-page-refresh-jquery\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/santosh-shah.com\/blog\/add-class-active-on-page-refresh-jquery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/add-class-active-on-page-refresh-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/santosh-shah.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add class active on page refresh jquery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\",\"url\":\"https:\/\/santosh-shah.com\/blog\/\",\"name\":\"Santosh Kumar Shah\",\"description\":\"JavaScript Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\",\"name\":\"Santosh Kumar Shah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"caption\":\"Santosh Kumar Shah\"},\"description\":\"I am JavaScript developer.\",\"sameAs\":[\"https:\/\/santosh-shah.com\/blog\"],\"url\":\"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add class active on page refresh jquery - Santosh Kumar Shah","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/santosh-shah.com\/blog\/add-class-active-on-page-refresh-jquery\/","og_locale":"en_US","og_type":"article","og_title":"Add class active on page refresh jquery - Santosh Kumar Shah","og_description":"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 \u201cactive\u201d in a HTML method. There are lots of ways to do this. PHP does it well. But in […]","og_url":"https:\/\/santosh-shah.com\/blog\/add-class-active-on-page-refresh-jquery\/","og_site_name":"Santosh Kumar Shah","article_published_time":"2020-06-30T11:03:56+00:00","author":"Santosh Kumar Shah","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Santosh Kumar Shah","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/santosh-shah.com\/blog\/add-class-active-on-page-refresh-jquery\/","url":"https:\/\/santosh-shah.com\/blog\/add-class-active-on-page-refresh-jquery\/","name":"Add class active on page refresh jquery - Santosh Kumar Shah","isPartOf":{"@id":"https:\/\/santosh-shah.com\/blog\/#website"},"datePublished":"2020-06-30T11:03:56+00:00","author":{"@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f"},"breadcrumb":{"@id":"https:\/\/santosh-shah.com\/blog\/add-class-active-on-page-refresh-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/santosh-shah.com\/blog\/add-class-active-on-page-refresh-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/santosh-shah.com\/blog\/add-class-active-on-page-refresh-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/santosh-shah.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Add class active on page refresh jquery"}]},{"@type":"WebSite","@id":"https:\/\/santosh-shah.com\/blog\/#website","url":"https:\/\/santosh-shah.com\/blog\/","name":"Santosh Kumar Shah","description":"JavaScript Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f","name":"Santosh Kumar Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","caption":"Santosh Kumar Shah"},"description":"I am JavaScript developer.","sameAs":["https:\/\/santosh-shah.com\/blog"],"url":"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/"}]}},"_links":{"self":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/79","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/comments?post=79"}],"version-history":[{"count":0,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/79\/revisions"}],"wp:attachment":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/media?parent=79"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/categories?post=79"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/tags?post=79"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}