刷新时保持在同一标签上（标签内的标签）

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

解决： 水平制表工作得很好，但对于垂直制表符，控制权将转到默认选项卡，因此必须使用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) {} 
    } 
}); 

Answer 2

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

这里是使用标签+饼干保存最后点击选项卡

的例子

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

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

紧密并重新打开它，你会看到相同的点击的选项卡

更新：3年后这个答案jQuery用户界面已经过时了的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) 
     } 
    }); 
    });