Оставайтесь на одной и той же вкладке при обновлении (вкладки внутри вкладок)

Question

На странице отправить основную вкладку (Регистрация, блокировка, разблокировка и т. Д.) Остается на текущей, но суб-вкладка (список, заблокирован, выгружен и т. Д.) Переходит в значение по умолчанию (Поиск) на странице submit. Например, если я делаю заявку на вкладку «Список» или «Заблокировано», она по умолчанию имеет вкладку «Поиск». Проблема: Я должен следить как вкладку горизонтальной и вертикальной вкладки и в настоящее время я могу отслеживать только вкладку горизонтального

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 вкладка Sub (по вертикали):

<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 Главная Tab:

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,

здесь приведен пример использования вкладок + куки, чтобы сохранить последний Clicked Вкладка

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

demo: Открыть ссылку http://jqueryui.com/demos/tabs/cookie.html

близкий его и повторно откройте его и вы увидите те же вкладки Clicked

обновление: после 3-х лет этого ответа JQuery Пользовательский интерфейс устарел вариант печенья: 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) 
     } 
    }); 
    });