CODEWITHSUNDEEP
jquery
bigmeister
bigmeister

Reputation: 1227

Jquery add class and keep it after page reload

I have a problem with keeping added classes on click event after page is reloaded.

Let's assume I've got markup like this:

<ul class="menu">
  <a class="partial-link" href="{% url 'payment-technology-mainpage' %}"><li class="menu-first"><span class="line">ONE</span><span class="arrow">&rarr;</span></li></a>
  <a class="partial-link" href="{% url 'insurance_mainpage' %}"><li class="menu-first"><span class="line">TWO</span><span class="arrow">&rarr;</span></li></a>
  <a class="partial-link" href="{% url 'admin_mainpage' %}"><li class="menu-first"><span class="line">THREE</span><span class="arrow">&rarr;</span></li></a>
  <a class="partial-link" href="{% url 'bok_mainpage' %}"><li><span class="line">FOUR</span><span class="arrow">&rarr;</span></li></a>
  <a class="partial-link" href="{% url 'regio_dashboard' %}"><li class="menu-last"><span class="line">FIVE</span><span class="arrow">&rarr;</span></li></a>
  <a class="partial-link" href="{% url 'intercity_mainpage' %}"><li class="menu-last"><span class="line">SIX</span><span class="arrow">&rarr;</span></li></a>
  <a class="partial-link" href="{% url 'tickets-mainpage' %}"><li class="menu-last"><span class="line">SEVEN</span><span class="arrow">&rarr;</span></li></a>
  <a class="partial-link" href="{% url 'angular-tickets' %}"><li class="menu-last"><span class="line">EIGHT</span><span class="arrow">&rarr;</span></li></a>
</ul>

I'd like to add class "active" to "span" inside "a" elements and keep it after page is reloaded. I tried to do something like this:

var menuItem = $("span.line");
menuItem.on("click", function(e) {
   menuItem.removeClass("active");
   $(this).addClass("active");
});

But it doesn't work :( I'll be grateful for any ideas.

EDIT Or maybe do you have any other solutions to make menu-items colored after clicking them? The problem is that I want them stay colored after page reload.

Upvotes: 0

Views: 715

Answers (1)

Ben Chan
Ben Chan

Reputation: 250

HTML is stateless, meaning once you refresh the page it gets recreated and "forgets" whatever changes may have happened during the previous page session.

As Carsten mentioned in his comment, localStorage is an option (although I'm not very familiar with its implementation).

Alternatively, you could store a cookie that updates each time a different menuItem is selected. Most modern browsers have cookies enabled, so if you were to set the cookie whenever a menuItem was selected, then on page load you check the current cookie and then highlight the menuItem accordingly. The cookie could store the specific menuItem's id or other unique identifier.

Upvotes: 1

Related Questions