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

Question

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

<div id="tabs">
  @Html.Hidden("SelectedTabId")
  <ul>
    <li><a href="#Tab-1">Tab1</a></li>
    <li><a href="#Tab-2">Tab2</a></li>
  </ul>
  <div id="Tab-1">
  </div>
  <div id="Tab-2">
  </div>
</div>

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

我正在使用一个隐藏字段,SelectedTabId(参见上面的代码),它保留了当前活动选项卡,因此我使用选项卡活动上的选项卡索引更新它,并且我正在通过请求此值重新加载页面后激活正确的选项卡.见下面的代码:

<script type="text/javascript">
        $(function () { 
            $("#tabs").tabs({ active: $('#SelectedTabId').val()});
        }

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

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

我正在使用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 sessionStorage.removeItem('tab-index');

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

这是sessionStorage的演示