1

我有一个带有两个选项卡的 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

4

2 回答 2

5

使用浏览器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，尝试使用您的条件更新选项卡。我希望它有所帮助。

这是本地存储的演示

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

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

这是sessionStorage 的演示

于 2013-10-23T12:17:02.207 回答
0

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

HTML：

Currently active tab: <input type="text" id="active_tab">
<div id="tabs">
<ul>
<li><a href="#tabs-1" id="1">Tab 1</a></li>
<li><a href="#tabs-2" id="2">Tab 2</a></li>
<li><a href="#tabs-3" id="3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<p>Tab 1 content</p>
</div>
<div id="tabs-2">
<p>Tab 2 content</p>
</div>
<div id="tabs-3">
<p>Tab 3 content</p>
</div>
</div>

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

});
于 2013-10-23T13:09:10.297 回答