如何在页面刷新时记住css类？

其实我想在点击标签时添加锚点标签的类，但它隐藏在页面的加载上。在我的情况下，我想在加载后刷新我的页面，它应该添加任何被点击的类。如何解决这个..如何在页面刷新时记住css类？

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

来源

2017-02-17 Mohan

在刷新您的更改将会消失。你可以做两件事 - 1.将点击的项目保存到本地存储或cookie中，如果存在任何标签，则在加载时将选定的类添加到该项中。 2.或者您可以将选定的标签保存到后端，并在加载时通过ajax并添加任何人被选中的类。 – psycho

您可以使用localstorage或cookie来保存数据，如果您不重新加载页面，则不会工作。 – geekbro

如何存储在本地存储？ – Mohan

有很多方法可以做到这一点。以下代码更适合您的指导。与附加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>

你的样本HTML中的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。

我希望这对你有帮助。

来源

2017-02-17 08:08:19 Combine

如何在页面刷新时记住css类？

回答

相关问题