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

问题描述：

我有一个带有两个标签的jui-ui标签组件.

I have a jquery-ui tab component with two tabs.

<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处于活动状态，而不是在重新加载页面之前处于活动状态.

When I am in Tab-2, I do some stuff that cause some fields (@Html.TextBoxFor) in tab-2 to be updated programmatically and automatically when some condition occurs. So after it happens (fields updated) the page is reloaded. After page is reloaded, first tab Tab-1 is being active, but I want Tab-2 to be active instead which it was the active before page was reloaded.

我正在使用一个隐藏字段SelectedTabId(请参见上面的代码)，该字段保持当前活动标签页，因此我使用标签页上的标签页索引处于活动状态来对其进行更新，并且在通过请求此值重新加载页面后，我正在激活正确的标签页.参见下面的代码:

I am using a hidden field, SelectedTabId (see code above), which keeps the current active tab so I am updating it with the tab index on tab active and I am activating the correct tab after page is reloading by request this value. See below code:

<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>

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

I want previous active tab to keep active after page is reloaded but it is not working so what am i doing wrong?

我正在使用jQuery-ui 1.10.2

I am using jQuery-ui 1.10.2

答

使用浏览器 sessionStorage 存储标签索引，

Use browser sessionStorage to store the tab index,

类似这样的东西:

$(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，请尝试根据您的条件更新选项卡.希望对您有帮助.

this will update the sessionStorage on changing the tab, try updating the tab by using your condition. I hope it helps.

这是 用于本地存储的演示

here is the Demo for local storage

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

sessionStorage将自动清除. 它的工作方式与localStorage差不多.

sessionStorage is cleared automatically when the browser is closed. It works in pretty much the same way as localStorage.

这是 sessionStorage的演示

here is the Demo for sessionStorage

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

相关推荐