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

这是 Demo for local storage

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

删除sessionStorage 浏览器关闭时会自动清除

sessionStorage。它的工作方式与localStorage几乎相同。

这是 Demo for sessionStorage

Answer 2

我找到了将当前活动标签的 ID存储到隐藏变量中的方法。看一下 demo 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); } }); });

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

2 个答案: