刷新时保持在同一选项卡上（选项卡中的选项卡）

Question

提交页面后，主选项卡（注册、锁定、解锁等）停留在当前选项卡上，但子选项卡（列表、锁定、签出等）在页面提交时变为默认（搜索）。例如，如果我在列表或锁定选项卡上提交，则默认为搜索选项卡。 问题：我必须同时跟踪水平选项卡和垂直选项卡，目前我只能跟踪水平选项卡

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

Answer 2

已解决： 水平选项卡工作正常，但对于垂直选项卡，控件将转到默认选项卡，因此必须使用 ui.oldtab.index()

jQuery:

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