Question

我有一个包含jQuery ui tab控件的页面。这工作得很好。我遇到的问题是在从DropDownList发出的PostBack之间保存选定的选项卡，而没有（offcourse）禁用那些PostBack。

我的aspx页面上有以下代码，我没有收到任何Javascript错误：

<script>
    var selected_tab = 1;
    $(document).ready(function () {
        var tabs = $("#rapportentabs").tabs({
            activate: function (e, i) {
                selected_tab = i.index;
            }
        });
        selected_tab = $("[id$=selected_tab]").val() != "" ? parseInt($("[id$=selected_tab]").val()) : 0;
        tabs.tabs("option", "active", selected_tab);
        $("form").submit(function () {
            $("[id$=selected_tab]").val(selected_tab);
        });
    });
</script>

<div id="rapportentabs">//containing the tabs itself</Div>
<asp:HiddenField ID="selected_tab" runat="server" />

我的代码背后有：

protected void Page_Load(object sender, EventArgs e)
{
    selected_tab.Value = Request.Form[selected_tab.UniqueID];
}

我终于找到了一个似乎完美无缺的解决方案

使用直接引用对象更改javascript部分并使用i.newTab.index（）而不是i.index

正确的脚本应为：

<script>
    var selected_tab = 1;
    $(document).ready(function () {
        var tabs = $("#rapportentabs").tabs({
            activate: function (e, i) {
                selected_tab = i.newTab.index();
                $("#selected_tab").val(selected_tab);
            }
        });
        selected_tab = $("#selected_tab").val() != "" ? parseInt($("#selected_tab").val()) : 0;
        tabs.tabs("option", "active", selected_tab);
        $("form").submit(function () {
            $("#selected_tab").val(selected_tab);
        });
    });
</script>

Answer 1

一个选项是将selected_tab保存在localstorage中，然后在页面加载时将其恢复 - 这不仅会在您发布时保存选定的选项卡，还会在关闭选项卡并重新打开时保留选定的选项卡。 / p>

另一个选择，更好的恕我直言，是用Ajax发布表单，这样你根本不会刷新页面 - 但这意味着你必须更新任何页面更改，这可能是很多工作，如果你有很多服务器端渲染代码。

在PostBack c＃jQuery 1.10时保持标签位置

1 个答案: