会话中对 CSS 的持续更改答案

【问题标题】：Persistent change to CSS for a session会话中对 CSS 的持续更改
【发布时间】：2017-02-23 11:35:09
【问题描述】：

我有一个div (1) 和display:block，另一个div (2) 和display:none，第三个div 也有display:none。

在每次点击或提交表单时，我想将第二个div 的display 更改为block，将第一个更改为none。

虽然这可以使用 Javascript 完成，但我希望 CSS 的这种更改能够在特定会话中保持不变。我怎样才能做到这一点？

【问题讨论】：

@evolutionxbox 我曾尝试单独使用 jquery 和 $("#2").css('display', 'block'); $("div#1").replaceWith( $( "#2" ) ); 来实现这一点，但是当我尝试单击 div2 上的提交并尝试隐藏 div1 和 div2 以显示 div3 时，然后当提交按钮重新加载页面，它只是恢复到 div1，因为对 div1 的更改不是持久的。

标签： javascript php css session

【解决方案1】：

仅使用客户端存储的一种（尽管很老套）方法是SessionStorage。您可以在其中存储一些值，并根据该值设置 div 在页面加载时的可见性。

/* When the user clicks the form */
sessionStorage.setItem("myValue", "showDiv2");

...    

/* When the page is loaded */
if (sessionStorage.getItem("myValue") === "showDiv2") {
    $('#div2').show();
    $('#div1').hide();
} else {
    $('#div1').show();
    $('#div2').hide();
}

没有办法永久更改css源，只能在dom加载后使用javascript对其进行修改。

【讨论】：

我可以尝试使用 cookie 进行更改吗？顺便说一句，如果您可以在此处查看原始问题 - stackoverflow.com/questions/42391184/… 非常感谢您的帮助。
sessionStorage 本质上是在用户会话结束时被清除的 cookie。您还可以使用 localStorage，它会一直保留在用户的浏览器内存中，直到您清除它或他们清除其 cookie。
我都试过了，在这种情况下它仍然恢复到 div1 - stackoverflow.com/questions/42391184/…

【解决方案2】：

使用这个

$('#formid').submit(function(e){
        $("#2").css('display', 'block');
        $("div#1").css('display', 'none');
    return false;
});

https://jsfiddle.net/mewwt82x/

【讨论】：

我已经尝试过了，但是当切换到第三个 div 时，在 div2 上完成表单后，它只是恢复到 div1，因为 div1 和 div2 的变化不是持久的。请检查这个 - stackoverflow.com/questions/42391184/…