Question

我在常见的包装类下的一个html页面中有多个div。我在点击下一个和上一个选项时使用隐藏和显示方法。

我想要实现的目标：在页面重新加载/刷新时，当前显示的div应该在页面重新加载后显示。

因此，如果您从粉红色屏幕重新加载/刷新，它应该在页面重新加载后显示相同的粉红色屏幕。

我尝试了什么：我存储显示属性（无或块）是本地存储，并在页面重新加载时尝试再次为div提供相同的属性。我在Stack溢出中检查的大多数响应和解决方案都是关于在刷新时打开相同的选项卡。但我的情况是在同一个标签中我有多个div，我想从之前的相同状态打开。

我使用的逻辑：

$(window).on('load', function(){
  var disp = localStorage.getItem("disp");
  var ustatus = JSON.parse(disp);
  $(".chk").text(ustatus);
  for (var x=ustatus; x<ustatus.length; x++){
    $(".pg"+x).css("display", ustatus[x]);
  }
});

这是我试过的小提琴链接：

Page reload demo JS Fiddle link

Answer 1

您的HTML和CSS代码非常完美，但您需要在JavaScript代码中进行更正。

观察1：您＆＃34;对于＆＃34;循环分配显示样式有变量x的问题。您需要将整数值分配给x。

观察2：您需要删除＆＃34;显示＆＃34;来自＆＃34; div＆＃34;的风格单击＆＃34; next＆＃34;和＆＃34;之前＆＃34;链接。

听到新的Js fiddle link更新代码。

$(window).on('load', function () {
        //localStorage.removeItem("disp");
        var disp = localStorage.getItem("disp");
        var ustatus = JSON.parse(disp);
        $(".chk").text(ustatus);
        for (var x = 1; x <= ustatus.length; x++) {
            $(".pg" + x).css("display", ustatus[x-1]);
        }
    });

    $(".next").on("click", function () {
        $(this).parent().addClass("off").removeClass("on").removeAttr("style");
        $(this).parent().next().addClass("on").removeClass("off").removeAttr("style");
    });

    $(".prev").on("click", function () {
        $(this).parent().addClass("off").removeClass("on").removeAttr("style");
        $(this).parent().prev().addClass("on").removeClass("off").removeAttr("style");
    });

    $(window).on('beforeunload', function () {
        var display = $(".clr").map(function () {
            return $(this).css("display");
        }).get();
        localStorage.setItem("disp", JSON.stringify(display));
    });

您也可以download this file。请运行index.html以查看输出。

Answer 2

您可以在不使用display的情况下执行此操作，您可以使用on和off类，我认为这是为

创建的原因

$(window).on('load', function(){
var disp = localStorage.getItem("disp");
var ustatus = JSON.parse(disp);
if(ustatus!=undefined){
 $(".chk").text(ustatus);
 for (var x=1; x<=ustatus.length; x++){
   if(ustatus[x-1]=='on'){
    $(".pg"+x).addClass("on").removeClass("off");
   }
   else{
    $(".pg"+x).addClass("off").removeClass("on");
   }
 }
}

$(".next").on("click", function(){
  $(this).parent().addClass("off").removeClass("on");
  $(this).parent().next().addClass("on").removeClass("off");
});

$(".prev").on("click", function(){

  $(this).parent().addClass("off").removeClass("on");
  $(this).parent().prev().addClass("on").removeClass("off");
});


$(window).on('beforeunload', function(){
var display = $(".clr").map(function(){
if($(this).hasClass('on'))
  return 'on';
else
  return 'off';
}).get();

localStorage.setItem("disp", JSON.stringify(display));
});
});

在页面重新加载时存储div状态

2 个答案: