ページの更新時に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

はそれを行うには多くの方法がありますが。以下のコードはあなたのためのガイダンスです。

ここで追加ID-sのあなたのサンプルHTML

<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がなくても動作するように調整できますが、やや複雑です。私は物事の仕組みをはっきりと理解するためにだけIDを付け加えました。

私はこれがあなたに役立つことを願っています。