Add an active CSS class to a block upon page reload

Question

Add an active CSS class to a block upon page reload

I'm having a bit of trouble with my HTML code. Here's what it looks like:

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

My goal is to make it so that when a user clicks on one of the blocks, it becomes active and can be highlighted with a different color.

In my jQuery script, I've been attempting to add the class active to the clicked block:

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

While this works while the next page is loading, after a redirect, the active class is not remembered. How can I make sure that the class active stays applied on the loaded page?

javascript jquery html css

Answer 1

Answer №1

To store and retrieve data upon redirecting or loading a page, the local storage/session storage feature can be utilized.

 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");
        });
    });

Answer 2

To store and retrieve data upon redirecting or loading a page, the local storage/session storage feature can be utilized.

 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");
        });
    });

Answer 3

Answer №2

If you're wondering whether to use Window.sessionStorage or Window.localStorage, it's worth taking a moment to explore the differences by checking out:

HTML5 Local storage vs. Session storage

Session storage:

In the context of setting elements' href attribute and class within a click event, utilizing Window.sessionStorage can be useful. Storing and retrieving these values from sessionStorage on page load for element manipulation is exemplified in the following code snippet:

// 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.getIt...

Local storage:

A similar approach can be taken using Window.localStorage. The scripting below demonstrates how this can be achieved:

// 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"));
  });
});

Answer 4

If you're wondering whether to use Window.sessionStorage or Window.localStorage, it's worth taking a moment to explore the differences by checking out:

HTML5 Local storage vs. Session storage

Session storage:

In the context of setting elements' href attribute and class within a click event, utilizing Window.sessionStorage can be useful. Storing and retrieving these values from sessionStorage on page load for element manipulation is exemplified in the following code snippet:

// 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.getIt...

Local storage:

A similar approach can be taken using Window.localStorage. The scripting below demonstrates how this can be achieved:

// 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"));
  });
});

Answer 5

Answer №3

$(document).ready(function(){
    $(".box").on('click', function () {
      $(this).toggleClass("selected");
    });
});

Answer 6

$(document).ready(function(){
    $(".box").on('click', function () {
      $(this).toggleClass("selected");
    });
});

Add an active CSS class to a block upon page reload

Answer №1

Answer №2

Answer №3

Similar questions

Move one of the numerous navigation bar links to the right using Bootstrap 4

Ways to send information from a child component to its parent component when a button is clicked in the

Tips for creating a line break within a Bootstrap progress bar when the text exceeds the width of a div

CSS animation shifting while altering its color palette

How can I display a list of relative urls in an android TextView?

Showing a group of users in real-time as they connect using Socket IO

What is the method for incorporating opacity into the background color CSS attribute using a Fluent UI color?

Is there a way to customize the animation for a button in material UI?

Can someone please provide me with the correct syntax for a jQuery AJAX PUT request that is JSON encoded?

FoxyWeb Requests: Utilizing XMLHttpRequest in Firefox Extensions

An alternative to Firebug for Internet Explorer

When the add button is clicked, a new radio button will be added along with the value entered in

Guide to adding dividing lines between columns with bootstrap

Tips on setting up and managing configuration and registering tasks in Grunt

A JavaScript function for parsing a JSON string using the `new Function`

When resizing the browser window, this single horizontal page website does not re-center

What is the reason I am unable to upload personalized templates using <script> elements?

ItextSharp Pdf file generation does not include underlining or blue coloring for anchor text

"Exploring Mocha and Chai: Tips for Generating a Comprehensive List of Errors in Test Cases

How do I go about uploading the code as instructed on the platform's e-commerce details page?