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 Sub标签：

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

Answer 1

我假设你使用的是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。

但如果符合您的需求，您仍然可以在此处查看https://stackoverflow.com/a/14313315/109217

OR

你可以试试这个

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

刷新时保持相同的选项卡（选项卡中的选项卡）

2 个答案: