Cookies Jquery工具：在刷新或保存数据时保留所选选项卡

我使用的是tab Ui

现在我想在页面重新加载时保持选项卡处于选中状态。有办法吗？下面是我的代码

$(function() {
    // setup ul.tabs to work as tabs for each div directly under div.panes
    $("ul.tabs").tabs("div.panes > div");
});

---

在页面刷新之间生存的最简单方法是在会话中或通过任何服务器端脚本存储选定的选项卡id。

在客户端存储数据的方法只有：或

---

请参阅线程：

以下是存储cookie并检索它的简单实现：

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

当然，您可能需要测试cookie是否已设置并返回0或其他值，以便

getCookie

不会返回未定义的值

另一方面，您的

ul.tabs

选择器可以通过按id指定选项卡来改进。如果页面上确实有一个选项卡集合，则需要一种更好的按名称存储cookie的方法，即选择/保存选项卡集合的更具体的方法

更新

好的，我修复了ui.index的用法，它现在以+1的增量保存到选项卡索引

以下是一个实际的工作示例：

更新与jQuery工具一起使用

根据，它应该是这样工作的：

$(function() {
   //instantiate tabs object 
   $("ul.tabs").tabs("div.panes > div");

   // get handle to the api (must have been constructed before this call)
   var api = $("ul.tabs").data("tabs");

   // set cookie when tabs are clicked
   api.onClick(function(e, index) {
          setCookie("selectedtab", index + 1, 365);
   });     
   // retrieve cookie value on page load
   var selectedTab = getCookie("selectedtab");

   if (selectedTab != "undefined") {
    api.click( parseInt(selectedTab) ); // must parse string to int for api to work
   }

});

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

$（函数（）{
//实例化选项卡对象
$（“ul.tabs”）.tabs（“div.panes>div”）；
//获取api的句柄（必须在此调用之前构造）
var api=$（“ul.tabs”）.数据（“tabs”）；
//单击选项卡时设置cookie
onClick（函数（e，索引）{
setCookie（“selectedtab”，索引+1365）；
});     
//在页面加载时检索cookie值
var selectedTab=getCookie（“selectedTab”）；
如果（已选择选项卡！=“未定义”）{
单击（parseInt（selectedTab））；//必须将字符串解析为int才能使api工作
}
});
函数getCookie（c_名称）{
变量i，x，y，ARRcookies=document.cookie.split（“；”）；
对于（i=0；i<0.length；i++）{
x=ARRcookies[i].substr（0，ARRcookies[i].indexOf（“=”）；
y=ARRcookies[i].substr（ARRcookies[i].indexOf（“=”）+1）；
x=x.replace（/^\s+|\s+$/g，”）；
如果（x==c_名称）{
返回unescape（y）；
}
}
}
函数setCookie（c_名称、值、exdays）{
var exdate=新日期（）；
exdate.setDate（exdate.getDate（）+exdays）；
var c_value=escape（value）+（exdays==null）？“”：“expires=“+exdate.toutString（））；
document.cookie=c_name+“=”+c_值；
}

以下是一个工作（未设置样式）示例：

以下是我在检查jsbin.com示例中的cookie时在Firefox中看到的内容：

---

这对我来说很有用。。。至少我还没有遇到任何问题：

$('#tabs').tabs({
            select: function (event, ui)
            {
                $.cookie('active_tab', ui.index, { path: '/' });
            }
        });
$('#tabs').tabs("option", "active", $.cookie('active_tab'));

我使用的是：jQuery1.8.2，jQueryUI1.9.1

我之所以设置“路径”，是因为在C#中，我在mvc控制器中设置了该值，该控制器默认为“/”。如果路径不匹配，则不会覆盖现有cookie。下面是我的C代码，用于设置上面使用的同一cookie的值：

Response.Cookies["active_tab"].Value = "myTabIndex";

编辑： 从jQueryUI1.10.2开始（我刚刚尝试了这个版本，不确定它是否在以前的版本中被破坏），我的方法不起作用。这段新代码将使用jQueryUI1.10.2设置cookie

 $('#tabs').tabs({
     activate: function (event, ui) {
         $.cookie('active_tab', ui.newTab.index(), { path: '/' });
     }
 });

---

我的前端使用CookieJS，后端使用这个工具（wordpress）。我可以使用相同的脚本吗？我已经有一个cookie js，我正在使用它进行列表网格布局。我可以为后端使用相同的js（wordpress）吗，就像我为后端使用这个选项卡布局一样。后端？我的回答将帮助您存储选定的jQueryUI选项卡并在页面加载时检索它。我看不出wordpress对这有什么影响。我的解决方案提供的js将在支持javascript的浏览器中的任何HTML页面上工作。是的，5个或6个都可以，甚至更多。我试过你的coxe，但不知怎么的都不起作用，甚至它也禁用了选项卡。@pixelngrain，你改变了我建议你必须改变的内容了吗？我重新安排了我的解决方案，并提供了一个示例。除非你禁用了cookies，否则它是有效的。我不知道我是否做错了什么，但它不起作用。我正在做的是将第一个代码嵌入头部，将第二个代码嵌入页脚。这是正确的方法吗？对于引导，解决方案将在

 $('#tabs').tabs({
     activate: function (event, ui) {
         $.cookie('active_tab', ui.newTab.index(), { path: '/' });
     }
 });