JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<div class="class1" id="id"></div>

<a href="javascript://" onclick="apofunc('class1')">Сменить класс 1</a>
<a href="javascript://" onclick="apofunc('class2')">Сменить класс 2</a>
<a href="javascript://" onclick="apofunc('class3')">Сменить класс 3</a>
<a href="javascript://" onclick="apofunc('class4')">Сменить класс 4</a>

CSS

#id {
    width:100px;
    height:100px;
    background:#ddd;
    box-shadow:1px 1px 3px #aaa;
}

.class1 {
    background:#ddd !important;
}
.class2 {
    background:#ff0000 !important;
}
.class3 {
    background:#00ff00 !important;
}
.class4 {
    background:#0000ff !important;
}

JavaScript

$(document).ready(function() { 
if(localStorage.getItem('apopclass')) { 
$('#id').attr('class', localStorage.getItem('apopclass')); 
}; 
}); 

function apofunc(c) { 
$('#id').attr('class', c); 
localStorage.setItem('apopclass', c); 
}