如何将 cookie 与点击事件显示的内容一起使用？ (HTML/CSS/jQuery)

Question

我无法找到解决涉及使用 cookie 的问题的方法。基本思想是，当用户单击选项卡时，会触发 jQuery on click 事件，并且下面显示的内容会发生变化。页面刷新后是否可以存储页面的最新状态？

HTML代码如下所示

<ul>
   <li id='column1'><a href='#' class='current'>column1</a></li>
   <li id='column2'><a href='#'>column2</a></li>
   <li id='column3'><a href='#'>column3</a></li>
</ul>

<div id='displayContent'>
*Content displayed here*
</div>

jQuery 代码如下所示

$("#column1").click(function(){
    $("#column3").hide();
    $("#column2").hide();
    $("#column1").css("display", 'block');
    $("#column3 a").removeClass();
    $("#column2 a").removeClass();
    $("#column1 a").addClass("current");
});

所以基本上它的工作原理是，当您单击列时，将显示所需选择的内容，并将“当前”类添加到选择中。我需要找到一个解决方案，让浏览器记住最后点击了哪一列，以便在刷新页面时记住最后一列。

谢谢！

---

更新 - JQUERY 代码

好的，所以下载了 cookie 插件并将其添加到我的文件夹并进行设置。我现在已将我的 jQuery 代码更改为以下代码

$("#column1").click(function(){
    $("#column3Content").hide();
    $("#column2Content").hide();
    $("#column1Content").css("display", 'block');
    $("#column3 a").removeClass();
    $("#column2 a").removeClass();
    $("#column1 a").addClass("current");

    $.cookie("column1", 1);
    $.removeCookie("column2");
    $.removeCookie("column3");
});

var cookieVal = $.cookie("column1");
if ( cookieVal == 1) 
{
  $("#column3Content").hide();
  $("#column2Content").hide();
  $("#column1Content").css("display", 'block');
  $("#column3 a").removeClass();
  $("#column2 a").removeClass();
  $("#column1 a").addClass("current");
}

它现在可以记住上次点击的是哪一列，耶！不幸的是，当它检查存在哪个 cookie 时，它​​似乎没有重新添加“当前”类，该类用于更改所选列的颜色，有什么想法吗？

Answer 1

How do I set/unset cookie with jQuery?

要开始使用，请查看上面的链接。只需创建一个 cookie 并读取其值。

$.cookie("jar", 1);
var cookieVal = $.cookie("jar");
$.removeCookie("jar");

更新

$("#column1").click(function(){
    $("#column3").hide();
    $("#column2").hide();
    $("#column1").css("display", 'block');
    $("#column3 a").removeClass();
    $("#column2 a").removeClass();
    $("#column1 a").addClass("current");

    $.cookie("column1", 1);

});

var cookieVal = $.cookie("column1");
if ( cookieVal == 1 ) 
{
    $("#column3").hide();
    $("#column2").hide();
    $("#column1").css("display", 'block');
    $("#column3 a").removeClass();
    $("#column2 a").removeClass();
    $("#column1 a").addClass("current");
}