在页面重新加载时维护jQuery-ui之前的活动选项卡（在重新加载之前）

我有一个带有两个选项卡的jquery-ui选项卡组件。

 @Html.Hidden("SelectedTabId") 
 
Tab1
 
Tab2
 
 
 
 
 
  

当我在Tab-2中时，我会做一些事情，导致tab-2中的某些字段（@ Html.TextBoxFor）以编程方式自动更新，并在某些情况发生时自动更新。 因此，在它发生（字段更新）后，页面将被重新加载。 重新加载页面后，第一个选项卡Tab-1处于活动状态，但我希望Tab-2处于活动状态，而不是在重新加载页面之前它是活动的。

我正在使用一个隐藏字段，SelectedTabId（参见上面的代码），它保留当前活动选项卡，所以我使用选项卡活动上的选项卡索引更新它，我正在通过请求此值重新加载页面后激活正确的选项卡。 见下面的代码：

  $(function () { $("#tabs").tabs({ active: $('#SelectedTabId').val()}); } $(document).ready(function () { var tabs = $("#tabs").tabs({ beforeActivate: function (event, ui) { $('#SelectedTabId').val(ui.newTab.index()); } }); }  

我希望以前的活动标签在重新加载页面后保持活动状态，但它不起作用，所以我做错了什么？

我正在使用jQuery-ui 1.10.2

Answer 1

使用浏览器sessionStorage存储选项卡索引，

像这样的东西：

 $(document).ready(function () { var currentTabIndex = "0"; $tab = $("#tabs").tabs({ activate : function (e, ui) { currentTabIndex = ui.newTab.index().toString(); sessionStorage.setItem('tab-index', currentTabIndex); } }); if (sessionStorage.getItem('tab-index') != null) { currentTabIndex = sessionStorage.getItem('tab-index'); console.log(currentTabIndex); $tab.tabs('option', 'active', currentTabIndex); } $('#btn-sub').on('click', function () { sessionStorage.setItem("tab-index", currentTabIndex); //window.location = "/Home/Index/"; }); }); 

这将在更改选项卡时更新sessionStorage，尝试使用您的条件更新选项卡。 我希望它有所帮助。

这是本地存储的演示

您可以使用sessionStorage.removeItem('tab-index');删除sessionStorage sessionStorage.removeItem('tab-index');

关闭浏览器时会自动清除sessionStorage 。 它的工作方式与localStorage几乎相同。

这是sessionStorage的演示

Answer 2

我找到了将当前活动选项卡的id存储到隐藏变量的方法。 看看这个演示JSFIDDLE 。 当您获得当前活动选项卡表单的id时，隐藏的输入元素将其存储在会话或数据库中，并在页面重新加载时获取该值并将其设置为active:选项卡选项。

HTML：

 Currently active tab:  
 
 
Tab 1
 
Tab 2
 
Tab 3
 
 
 
Tab 1 content
 
 
 
Tab 2 content
 
 
 
Tab 3 content
 
  

JS：

 $(function() { $( "#tabs" ).tabs({ active: 2, activate: function( event, ui ) { var active = $( ".selector" ).tabs( "option", "active" ); console.log(active); $('#active_tab').val(active.context.activeElement.id); } }); });