javascript - 刷新后保持在同一选项卡上(选项卡中的选项卡)

Question

页面提交后，主选项卡(注册、锁定、解锁等)保留在当前选项卡上，但子选项卡(列表、锁定、 checkout 等)在页面提交时转到默认选项卡(搜索)。例如，如果我在“列表”或“锁定”选项卡上进行提交，则它默认为“搜索”选项卡。问题:我必须跟踪水平选项卡和垂直选项卡，目前我只能跟踪水平选项卡

HTML 主选项卡(水平):

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Register</a><div class="hidden_area">Register a device</div></li>
    <li><a href="#tabs-2">Lock</a><div class="hidden_area">Lock a device</div></li>
    <li><a href="#tabs-3">Unlock</a><div class="hidden_area">Unlock a device</div></li>
    <li><a href="#tabs-4">Transfer</a><div class="hidden_area">Transfer device to a new warehouse</div></li>
    <li><a href="#tabs-5">Manage Users</a><div class="hidden_area">Change/Add regions to a user</div></li>
    <li><a href="#tabs-6">Reporting</a><div class="hidden_area">Reporting Services</div></li>
</ul>

HTML 子选项卡(垂直):

<div id="tabs1">
    <ul>
        <li class="first current"><a href="#tab1">Search</a><div class="hidden_area1">Search a device</div></li>
        <li><a href="#tab2">List</a><div class="hidden_area1">List all devices</div></li>
        <li><a href="#tab3">Locked</a><div class="hidden_area1">List locked devices</div></li>
        <li><a href="#tab4">Checked Out</a><div class="hidden_area1">List checked out devices</div></li>
        <li><a href="#tab5">Repair</a><div class="hidden_area1">List repair devices</div></li>
        <li class="last"><a href="#tab6">No Check In</a><div class="hidden_area1">Devices checked out but not checked in</div></li>
    </ul>

jQuery 主选项卡:

var index = 'ui.newTab.index()';
//  Define data store name
var dataStore = window.sessionStorage;
var oldIndex = 0;
try {
    // getter: Fetch previous value
    oldIndex = dataStore.getItem(index);
} catch(e) {}
$( "#tabs" ).tabs({
    active: oldIndex,
    activate: function(event, ui) {
    //  Get future value
        var newIndex = ui.newTab.parent().children().index(ui.newTab);
        //  Set future value
        try {
            dataStore.setItem( index, newIndex );
        } catch(e) {}
    }
});

jQuery 子选项卡:

$( "#tabs1" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tabs1 li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );

Answer 1

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

这里是使用 tabs + cookies 保存最后点击的 tab 的例子

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 .

但您仍然可以在此处附加查看是否符合您的需求 https://stackoverflow.com/a/14313315/109217

或者

你可以试试这个

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