如何在 jquery 中自动回发后维护选定的选项卡？

Question

我有母版页和内容页，当我 select 来自下拉列表的值（例如）在任何选项卡中自动回发时，它不会保留在 selected 选项卡中，转到第一个选项卡:(我的脚本代码（关于在隐藏字段中保留选定的选项卡索引并在回发后设置此选项卡索引）在母版页中

我的主页：

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="YPNETYENI.Main" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />

    <title>YpNet | Personel Bilgi Sistemi</title>
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <link href="css/chosen.css" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="Stylesheet" type="text/css" />
    <!--[if lte IE 6]><link rel="stylesheet" href="css\style_ie.css" type="text/css" media="screen, projection" /><![endif]-->
    <link href="css/General.css" rel="stylesheet" type="text/css" />
    <link href="css/App.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />


    <script language="javascript" type="text/javascript">
        function ShowModal(Url, Width, Height) {
            var frame = $get('<%# ImFrame.ClientID %>');
            frame.width = Width;
            frame.height = Height;
            if ($find('mdlMain') = !null) {
                $find('mdlMain').show();
            }
            frame.src = Url;
        }
        function CloseModal() {
            $find('mdlMain').hide();
            var frame = $get('<%# ImFrame.ClientID %>');
            frame.src = '<%# ResolveClientUrl("~/ContentLoading.aspx") %>';
            return false;
        }
        function CancelScript() {
            var frame = $get('<%# ImFrame.ClientID %>');
            frame.src = '<%# ResolveClientUrl("~/ContentLoading.aspx") %>';
        }
        function OkayScript() {
            RefreshDataGrid();
            CancelScript();
        }
        function RefreshDataGrid() {
            // $get('btnRC').click();
            location.reload(true);
            //alert("location.reload activated");
        }


    </script>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js">      </script>

    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {
            var tabs = $("#tabs").tabs({
                select: function (e, i) {
                    selected_tab = i.index;

                }

            });
            selected_tab = $("[id$=selected_tab]").val() != "" ? parseInt($("[id$=selected_tab]").val()) : 0;
            tabs.tabs('select', selected_tab);
            $("form").submit(function () {
                $("[id$=selected_tab]").val(selected_tab);

            });

        });
    </script>
       </head>
        <body>
      <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">            </asp:ScriptManager>
          <div id="wrapper">


            <div id="menu">
                <asp:ContentPlaceHolder ID="cphHorizontalMenu" runat="server">
                </asp:ContentPlaceHolder>
            </div>
            <!-- #menu-->

            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>

        </div>
        </form>
           </body>
            </html>

我的内容页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PersonelGiris.aspx.cs" MasterPageFile="~/MasterHMenu.master" Inherits="YPNETYENI.PersonelGiris" %>

<asp:Content ID="Content1" ContentPlaceHolderID="chpMain" runat="Server">



    <p id="clickme">cllick me</p>
    <div class="GDiv">


        <asp:Panel ID="pnlPersonelDuzenleme" runat="server">
            <div class="GDiv">



            <div class="tabs">

                <asp:PlaceHolder ID="phMain" runat="server" Visible="false">
                    <ul>

                        <li><a href="#tabs-1">Personel Information</a></li>
                        <li><a href="#tabs-3">Job information</a></li>
                        <li><a href="#tabs-5">language information </a></li>


                    </ul>


                    <div id="tabs-1" class="GDiv">

                        <table cellpadding="0" cellspacing="0" class="hastable">
                            <tbody>


                                <tr>
                                    <td align="left" style="width: 170px">
                                        <asp:Label ID="Label9" runat="server" CssClass="caption" Text="* Surname :"></asp:Label>
                                    </td>
                                    <td align="left" colspan="3">
                                        <asp:TextBox ID="txtSrname" runat="server" CssClass="txt" Width="224px" MaxLength="32"></asp:TextBox>
                                    </td>
                                </tr>


                            </tbody>
                        </table>

                    </div>

                    <div id="tabs-3" class="GDiv">

                        <table>
                            <tbody>


                                <tr>
                                    <td align="left" style="width: 170px">
                                        <asp:Label ID="Label51" runat="server" CssClass="caption" Text="* Birim :"></asp:Label>
                                    </td>
                                    <td align="left" colspan="2">
                                        <asp:DropDownList ID="cmbBirim" runat="server" AutoPostBack="true" CssClass="txt"
                                            Width="230px" OnSelectedIndexChanged="cmbBirim_SelectedIndexChanged">
                                        </asp:DropDownList>
                                        <asp:Label ID="lblBirim" runat="server"></asp:Label>
                                    </td>
                                </tr>
                                </tbody>
                        </table>
                    </div>

                    <div id="tabs-5" class="GDiv">
                        <div class="DTitle4">
                            <div class="fleft title">
                                <asp:Label ID="Label56" runat="server" Text="Language information"></asp:Label>
                            </div>
                            <span class="cleanb"></span>
                        </div>
                        <table cellpadding="0" cellspacing="0" class="hastable">
                            <tbody>

                                <asp:Repeater ID="rptDil" runat="server" OnItemDataBound="rptDil_ItemDataBound">
                                    <ItemTemplate>
                                        <tr>
                                            <td style="height: 37px; width: 170px;" align="left">
                                                <table>
                                                    <tr>
                                                        <td>
                                                            <asp:ImageButton ID="btnDilSil" runat="server" ImageUrl="~/Img/Icons/icon-delete.png"
                                                                CommandArgument="0" OnClick="btnDilSil_Click" />
                                                        </td>
                                                        <td>
                                                            <asp:DropDownList ID="cmbDil" runat="server" CssClass="txt" Width="150px">
                                                            </asp:DropDownList>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td style="width: 205px; height: 30px;">
                                                <asp:DropDownList ID="cmbReading" runat="server" CssClass="txt" Width="75px">
                                                    <asp:ListItem Text="not bad" Value="1"></asp:ListItem>
                                                    <asp:ListItem Text="good" Value="2"></asp:ListItem>
                                                    <asp:ListItem Text="very good" Value="3"></asp:ListItem>
                                                </asp:DropDownList>
                                            </td>


                                        </tr>
                                    </ItemTemplate>
                                </asp:Repeater>
                                <tr>
                                    <td colspan="4">
                                        <asp:LinkButton ID="btnNewLanguage" runat="server" Font-Bold="True" OnClick="btnNewLanguage_Click">Add new language</asp:LinkButton>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </asp:PlaceHolder>
            </div>
           <asp:HiddenField ID="selected_tab" runat="server" Value="0" />
        </asp:Panel>
    </div>

</asp:Content>

并且我将此代码行添加到 .cs 页面

        selected_tab.Value = Request.Form["selected_tab"];

Answer 1

将此脚本添加到您的页面。

    <script>
       $(function(){         
           $('.tabs a').click(function(){           
                  $('#<%= selected_tab.ClientID %>').val($(this).index());
            });

            /// maintain tab
            $('.tabs ul').tabs('select',  $('#<%= selected_tab.ClientID %>').val());

       )};

</script>

Answer 2

此代码有效！当我 select 选项卡中 asp 控件中的值 selected 选项卡不会更改

<script type="text/javascript">
        $(document).ready(function () {
            var tabs = $(".tabs").tabs({
                activate: function (event, ui) {
                    localStorage.setItem("accIndex", $(this).tabs("option", "active"))
                },
                active: parseInt(localStorage.getItem("accIndex"))
            });
        });

</script>

如何在 jquery 中自动回发后维护选定的选项卡？

How to maintain selected tab after autopostback in jquery?

c#

jquery

asp.net

postback