请记住刷新后哪个选项卡处于活动状

Question

我正在网页上使用jquery选项卡,当页面刷新时,它会丢失我曾经使用过的标签并返回第一个标签页.

有没有人遇到这个问题,知道如何解决它？

Answer 1

和其他人一样,我在jQueryUI 1.10中苦苦寻找我的ui-tabs cookie历史.感谢Harry的解决方案以及我在下面的代码中提到的其他一些在线文档,我现在有了一个有效的非cookie解决方案!我能够在Firefox 18.0.1和IE 9.0.12中进行测试.根据我的资源,Chrome,Firefox,Safari和IE8及以上版本支持会话存储.

  $(function() {
    //  jQueryUI 1.10 and HTML5 ready
    //      http://jqueryui.com/upgrade-guide/1.10/#removed-cookie-option 
    //  Documentation
    //      http://api.jqueryui.com/tabs/#option-active
    //      http://api.jqueryui.com/tabs/#event-activate
    //      http://balaarjunan.wordpress.com/2010/11/10/html5-session-storage-key-things-to-consider/
    //
    //  Define friendly index name
    var index = 'key';
    //  Define friendly data store name
    var dataStore = window.sessionStorage;
    //  Start magic!
    try {
        // getter: Fetch previous value
        var oldIndex = dataStore.getItem(index);
    } catch(e) {
        // getter: Always default to first tab in error state
        var oldIndex = 0;
    }
    $('#tabs').tabs({
        // The zero-based index of the panel that is active (open)
        active : oldIndex,
        // Triggered after a tab has been activated
        activate : function( event, ui ){
            //  Get future value
            var newIndex = ui.newTab.parent().children().index(ui.newTab);
            //  Set future value
            dataStore.setItem( index, newIndex ) 
        }
    }); 
    }); 

Answer 2

我假设您正在使用jQuery UI选项卡,

以下是使用制表符+ Cookie保存最后点击的标签的示例

http://jqueryui.com/demos/tabs/#cookie

演示:打开此链接 http://jqueryui.com/demos/tabs/cookie.html

关闭它并重新打开它,您将看到相同的单击选项卡

更新: 经过3年的回答,jquery ui已经弃用了cookie选项:http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option.

但如果这符合您的需求,您仍然可以在这里查看/sf/answers/1001932081/

Answer 3

我刚刚实施的一个更简单的替代方案:

$(".tabs").tabs({
    select: function(event, ui) {                   
       window.location.replace(ui.tab.hash);
    },
});

这会将哈希值添加到网址,以便页面刷新将重新加载该选项卡,并且通过使用location.replace而不是location.hash,我们不会用不需要的步骤填充用户的历史记录.

希望有所帮助.

Answer 4

现在cookie已经在jQuery UI 1.10.0中消失了,我将Gayathiri的方法与新的选项和事件混合在一起:

// using cookie plugin from https://github.com/carhartl/jquery-cookie

var tabCookieName = "ui-tabs-1";
$(".tabs").tabs({
    active : ($.cookie(tabCookieName) || 0);
    activate : function( event, ui ) {
        var newIndex = ui.newTab.parent().children().index(ui.newTab);
        // my setup requires the custom path, yours may not
        $.cookie(tabCookieName, newIndex, { path: window.location.pathname });
    }
});