Question

我有一个使用jQuery标签的屏幕，并想知道我是否可以在刷新页面后保留选定的标签（JS .reload（）;）？

任何指导意见。

Answer 1

https://github.com/carhartl/jquery-cookie

或

http://code.google.com/p/cookies/downloads/detail?name=jquery.cookies.2.2.0.js.zip&can=2&q=

jquery.cookies.2.2.0.js的示例

$(document).ready(function () {
   var initialTabIndex = 0;
   var jCookies = jQuery.cookies;

   //alert('getting ' + jCookies.get("currentTab"));

   if(jCookies.get("currentTab") != null){
      initialTabIndex = jCookies.get("currentTab");
   }

   $('#tabs').tabs({
      activate : function(e, ui) {
         //alert('setting ' + ui.newTab.index());
         jCookies.set("currentTab", ui.newTab.index().toString());
      },
      active : initialTabIndex
   });
});

Answer 2

虽然之前使用cookie的答案肯定会有效，但鉴于人们对接受cookie的厌恶，它可能不是理想的解决方案。（这也意味着您需要在您的网站上显示免责声明，说明您使用Cookie，至少对欧盟访问者而言）。我建议尽可能避免使用Cookie，以便在禁用/拒绝Cookie时您的网站仍然有效。

更好的方法是使用＆＃34; hash＆＃34;在URL的末尾。

修改标签链接，如下所示：

<div id="UITabs">
<ul>
    <li><a href="#Tab1">Tab 1</a></li>
    <li><a href="#Tab2">Tab 2</a></li>
    <li><a href="#Tab3">Tab 3</a></li>
</ul>
<div id="Tab1"></div>
<div id="Tab2"></div>
<div id="Tab3"></div>
</div>

然后在您的脑海中，添加以下javascript以确保在更改选项卡时设置哈希值，并获取页面加载的哈希值并显示所需的选项卡：

$(document).ready(function () {

    $(function () {
        $("#UITabs").tabs();

        $("#UITabs").bind("tabsshow", function (event, ui) {
            location.hash = ui.newTab.find('a.ui-tabs-anchor').attr('href');
        });

        $(window).bind('hashchange', function (e) {
            $("#UITabs").tabs("select", location.hash);
        });
    });
});

在页面刷新后，有没有办法保持jQuery选中选项卡？

2 个答案: