jquery - 记住刷新后哪个选项卡处于事件状态

Question

我在网页上使用 jquery 选项卡，当刷新页面时，它会丢失我曾经使用过的选项卡并返回到第一个选项卡。

有人遇到过这个问题并知道如何解决吗？

Answer 1

像其他人一样，我在 jQueryUI 1.10 中为我的 ui-tabs cookie 历史而苦苦挣扎。感谢 Harry 的解决方案和我在下面的代码中引用的其他一些在线文档，我现在有了一个有效的非 cookie 解决方案!我能够在 Firefox 18.0.1 和 IE 9.0.12 中进行测试。根据我的资源，Chrome、Firefox、Safari 和 IE8 及以上版本支持 session 存储。

  $(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 ) 
        }
    }); 
    });