Как запомнить класс css на странице обновления?

Question

На самом деле я хочу добавить класс для тега привязки при щелчке тега, но он скрывается при загрузке страницы. В моем случае я хочу обновить мою страницу после загрузки, также она должна добавить класс для того, что нажимается. Как решить эту проблему ..

HTML код:

<div class="flDropDiv category_fl"> 
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/full-bed-sheets"> Full bed sheets </a> </div> 
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/fitted-bed-sheet"> Fitted bed Sheet </a> </div> 
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/flat-bed-sheet"> Flat bed sheet </a> </div> 
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/twin-bed-sheet"> Twin bed sheet </a> </div> 
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/twinxl-bed-sheets"> Twinxl bed sheets </a> </div> 
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/queen-bed-sheet"> Queen bed sheet </a> </div> 
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/king-bed-sheets"> King bed sheets </a> </div> 
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/cal-king-bed-sheets"> Cal king bed sheets </a> </div> 
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/duvet-covers"> Duvet covers </a> </div> 
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/bed-skirts"> Bed skirts </a> </div> 
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/standard-pillow-cases"> Standard Pillow cases </a> </div> 
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/king-pillow-cases"> King Pillow cases </a> </div> 
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/pillow-shells"> Pillow shells </a> </div> 
</div> 

JQuery Код:

$(".category_filter").click(function() { 
    // alert("coming");return false; 
    $(this).addClass('selected'); 
    //return false; 
}); 

Answer 1

Есть много способов сделать это. Этот ниже приведенный ниже код является скорее ориентиром для вас.

Ваш образец HTML с добавленным ID-s

<div class="flDropDiv category_fl"> 
    <div class="flItems"><a class="category_filter" id="category_filter_1" href="#1"> Full bed sheets </a> </div> 
    <div class="flItems"><a class="category_filter" id="category_filter_2" href="#2"> Fitted bed Sheet </a> </div> 
    <div class="flItems"><a class="category_filter" id="category_filter_3" href="#3"> Fitted bed Sheet </a> </div> 
    <div class="flItems"><a class="category_filter" id="category_filter_4" href="#4"> Fitted bed Sheet </a> </div> 
</div> 

---

---

JavaScript

//On page load - add selected class to clicked elements 
$(document).ready(function() { 
    let allCookies = getCookies(); 
    for(let cookie in allCookies){ 
    if(allCookies[cookie] === "clicked"){ 
     $("#"+cookie.trim()).addClass("selected"); 
    } 
    } 
}); 


//On item click - add selected class and remember it in cookie for later usage 
$(".category_filter").click(function(e) { 
    $(this).addClass('selected'); 
    setCookie(this.id, "clicked", 1); 
}); 

//Gets all the cookies 
function getCookies(){ 
    var pairs = document.cookie.split(";"); 
    var cookies = {}; 
    for (var i=0; i<pairs.length; i++){ 
    var pair = pairs[i].split("="); 
    cookies[pair[0]] = unescape(pair[1]); 
    } 
    return cookies; 
} 

//add new cookie 
function setCookie(cname, cvalue, exdays) { 
    var d = new Date(); 
    d.setTime(d.getTime() + (exdays*24*60*60*1000)); 
    var expires = "expires="+ d.toUTCString(); 
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; 
} 

Вот скрипку, что вы можете проверить все. https://jsfiddle.net/combine/kynf69vf/1/

Вы можете использовать мой код выше и настроить его, чтобы работать даже без id-s, но немного сложнее. Я добавил идентификаторы только для четкого понимания того, как все работает.

Надеюсь, это полезно для вас.