CSS Add Class active to block after page reload

Question

I have the following HTML:

<div class="side-button"> 
   <a href="/first"> First Option <a>
</div>
  <div class="side-button"> 
   <a href="/second"> Second Option <a>
</div>

When user click on one of the blocks, I want it to become active, so that I can highlight it with another color.

In my jQuery I'm trying to add class active on the clicked block:

jQuery(document).ready(function( $ ){
    $(".side-button").bind('click', function () {
      $(".side-button").removeClass("active");
      $(this).addClass("active");
    });
});

It works while next page is loading. After redirect, it doesn't remember active class.

How can I add class active so it will remember that on the loaded page?

Possible duplicate of [Keep CSS from refreshing on page reload](https://stackoverflow.com/questions/48441624/keep-css-from-refreshing-on-page-reload) — Vikasdeep Singh, Jun 27 '18 at 05:20

score 2 · Answer 1 · answered Jun 27 '18 at 05:30

2

for remember something on redirect/page load, we can use local storage/session storage

 jQuery(document).ready(function( $ ){
        var retrievedClassName = localStorage.getItem('activeClass');
        if(retrievedClassName == "active"){
             //add active class to your element
        }
        $(".side-button").bind('click', function () {
          $(".side-button").removeClass("active");
          $(this).addClass("active");
          localStorage.setItem('activeClass', "active");
        });
    });

answered Jun 27 '18 at 05:30

Aravind S

2,347
2
12
21

Thanks! Your script help to remeber that ```.side-button``` was clicked. But i have like 8 blocks with the same class ```.side-button```. So on this step: ```//add active class to your element``` i can't just add active class, since it will be applied to all 8 blocks. I need also somehow to remember which of ```.side-button``` was clicked exactly. – Rost Jun 27 '18 at 05:43
1

for that, you need to have a unique IDs for the 8 blocks. by that, you can remember which side button is clicked. – Aravind S Jun 27 '18 at 05:48

Mamun · Answer 2 · 2018-06-27T07:26:29.417

You can use either Window.sessionStorage OR Window.localStorage. But before proceeding I will request you to look into: HTML5 Local storage vs. Session storage

Session storage:

You can use Window.sessionStorage to set the elements href attribute and class inside the click event. Then get those from sessionStorage on page load to set on the element:

// Get
var status = sessionStorage.getItem("status");
var elHref = sessionStorage.getItem("elementsHref")
$("a[href$='"+elHref+"']").addClass(status);

$(document).ready(function($){
  $("a").bind('click', function () {
    // Set
    sessionStorage.setItem("status", "active");
    sessionStorage.setItem("elementsHref", $(this).attr("href"))
    $("a").removeClass(sessionStorage.getItem("status"));
    $(this).addClass(sessionStorage.getItem("status"));
  });
});

Local storage:

You can achieve the same by using Window.localStorage like the following:

// Get
var status = localStorage.getItem("status");
var elHref = localStorage.getItem("elementsHref")
$("a[href$='"+elHref+"']").addClass(status);

$(document).ready(function($){
  $("a").bind('click', function () {
    // Set
    localStorage.setItem("status", "active");
    localStorage.setItem("elementsHref", $(this).attr("href"))
    $("a").removeClass(localStorage.getItem("status"));
    $(this).addClass(localStorage.getItem("status"));
  });
});

score -1 · Answer 3 · answered Jun 27 '18 at 05:38

-1

$(function(){
    $(".block").on('click', function () {
      $(this).removeClass("active");
      $(this).addClass("active");
    });
});

answered Jun 27 '18 at 05:38

Samik

1
2

CSS Add Class active to block after page reload

3 Answers3