即使在表单发布后仍保留 JQuery UI 选项卡选择答案

【问题标题】：Retain JQuery UI tab selection even after form post即使在表单发布后仍保留 JQuery UI 选项卡选择
【发布时间】：2011-02-15 13:33:11
【问题描述】：

我正在使用 JQuery UI 选项卡，其中我在选项卡中有多个表单。我想要的是 Retain Tab Selection 即使在 Form Post 之后。

我不想想使用 cookie.js

你可以在jsbin看到我的代码

我怎样才能使用其他方式实现这一点？

谢谢

【问题讨论】：

标签： jquery jquery-ui jquery-selectors

【解决方案1】：

最简单的方法是通过 ajax 发布表单。这样的事情会做：

$("form").submit(function() {
  $.post(); // do the necessary post here
  return false; // Do not submit the form
});

如果不允许使用Ajax，那么可以在url中传递tab信息：

<div id="fragment-1">
    <p>Form 1</p>
    <form method="post" action="?tab=1">
      <input type="text" value="">
      <input type="submit" value="Save Changes" />
    </form>
</div>

然后你在页面加载中你可以选择一个特定的标签：

$("#tabs").tabs("select", tab);

您需要使用服务器核心生成上面的选项卡，或使用this 之类的东西通过javascript 检索它。

【讨论】：

【解决方案2】：

您可以使用隐藏字段来保存值，然后在回发时保留。

<script type="text/javascript">
 $(document).ready(function () {
                $('#tabs').tabs({
                    select: function (event, ui) {
                        $("#<%= hfSelectedTAB.ClientID %>").val(ui.index);
                    }
                });
                $("#tabs").tabs("option", "selected", [$("#<%= hfSelectedTAB.ClientID %>").val()]);
            });
</script>

 <asp:HiddenField ID="hfSelectedTAB" runat="server"  Value="0"/>

简单。现在您的标签会保留。

【讨论】：