Question

非常感谢您的协助 -
我花了几个小时在这里和谷歌阅读各种答案，必须忽视一些事情。

我在Asp.Net上使用JQuery Tabs（JQuery 1.9.1 / JQuery UI 1.10.3），并希望在回发时维护选定的选项卡。
标签位于UpdatePanel内活动：<%= hdnSelectedTab.Value %>部分正在运行，因为我可以手动设置hiddenfield的值，并在回发时选择该标签。
但是，我无法更改hiddenfield。

的值

我的JavaScript是：

    <script type="text/javascript">
        $(function () {
            $("#tabs").tabs({
                show: function() {
                    var sel = $('#tabs').tabs('option', 'active');
                    $("#<%= hdnSelectedTab.ClientID %>").val(sel);
                },
                active: <%= hdnSelectedTab.Value %>
                });
        })
    </script>

我的标签结构是：

<asp:ScriptManager ID="scriptmanager" runat="server" />
    <asp:UpdatePanel runat="server" ID="tabpnl">
    <ContentTemplate>
        <tr>
            <td colspan="4">
            <br />
            <div id="tabs">
                <ul>
                    <li><a href="#tab-1" runat="server" id="tab1id">Tab1</a></li>
                    <li><a href="#tab-2" runat="server" id="tab2id">Tab2</a></li>
                    <li><a href="#tab-3" runat="server" id="tab3id">Tab3</a></li>
                    <li><a href="#tab-4" runat="server" id="tab4id">Tab4</a></li>
                </ul>
                <asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />
                    <div id="tab-1">
                        <table id="transaction2">
                            <tr>
                                <td id="tdpmt1" runat="server">
                                    <asp:Label ID="lblpmt1" runat="server" Text="Payment 1" CssClass="header" /></td>
                            </tr>
                            ....more code....

编辑以回应Aristos

我放弃了你的代码，但没有运气。回发仍将选定的选项卡重置为第一个选项卡。我用于测试的回发触发器是dropdownlist，其OnSelectedIndexChanged事件会更改label的文本。 dropdownlist和label都在UpdatePanel范围内。这是代码：

<asp:DropDownList ID="invoicestatusddl" runat="server" CssClass="dropdown" AutoPostBack="true" OnSelectedIndexChanged="invoicestatusddl_SelectedIndexChanged">
    <asp:ListItem Text="Invoiced" Value="1" Selected="True" />
    <asp:ListItem Text="Future" Value="0" />
</asp:DropDownList>

和

protected void invoicestatusddl_SelectedIndexChanged(object sender, EventArgs e)
{
    if (invoicestatusddl.SelectedValue == "0")
    {
        lblinvdate.Text = "Future Invoice Date:";
    }
    else
    {
        lblinvdate.Text = "Date Invoiced:";
    }
}

Answer 1

javascript部分仅在您第一次加载页面时运行，并且您在此处设置选定的选项卡。

现在，在使用UpdatePanel的Ajax的每个Update上，都不会运行相同的脚本。为了使其运行，您需要使用由于这个原因而存在的UpdatePanel javascript函数。

最简单的是pageLoad，用它来初始化你的代码，它会起作用

function pageLoad()
{
    $("#tabs").tabs({
        show: function() {
            var sel = $('#tabs').tabs('option', 'active');
            $("#<%= hdnSelectedTab.ClientID %>").val(sel);
        },
        active: <%= hdnSelectedTab.Value %>
    });
}

参考：http://msdn.microsoft.com/en-us/library/bb386417(v=vs.100).aspx

Answer 2

我最终为每个标签链接编写了单独的函数。如下：

<script>
    function changeHidden0(){
        document.getElementById("hdnSelectedTab").value = 0;
    }
    function changeHidden1(){
        document.getElementById("hdnSelectedTab").value = 1;
    }
    function changeHidden2(){
        document.getElementById("hdnSelectedTab").value = 2;
    }
    function changeHidden3(){
        document.getElementById("hdnSelectedTab").value = 3;
    }
</script>

感谢Aristos的帮助，您为我的Google搜索提供了一些额外的措辞，帮助我解决了这个问题。

Jquery选项卡设置隐藏字段值

2 个答案: