刷新時保持在同一標籤上（標籤內的標籤）

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