如何在 jquery 中自动回发后维护选定的选项卡？
Posted
技术标签:
【中文标题】如何在 jquery 中自动回发后维护选定的选项卡？【英文标题】：How to maintain selected tab after autopostback in jquery? 【发布时间】：2015-05-16 00:44:44 【问题描述】：我有一个母版页和内容页，当我从下拉列表中选择一个值时（例如）在任何选项卡中使用自动回发，它不会保留在选定的选项卡中，转到第一个选项卡:( 我的脚本代码（关于保留隐藏字段中的选定选项卡索引并在回发后设置此选项卡索引）在母版页中
我的母版页：
<%@ 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"];
【问题讨论】：
autopostback 似乎是一些 ASP 的东西。为了吸引合适的专家，我建议您添加一个 ASP 标签。我会自己做，但有几个“ASP ...”标签可供选择。
感谢您的建议，我现在添加了
【参考方案1】：
此代码有效！当我在选项卡中的 asp 控件中选择一个值时，所选选项卡不会改变
<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>
【讨论】：
【参考方案2】：将此脚本添加到您的页面。
<script>
$(function()
$('.tabs a').click(function()
$('#<%= selected_tab.ClientID %>').val($(this).index());
);
/// maintain tab
$('.tabs ul').tabs('select', $('#<%= selected_tab.ClientID %>').val());
);
</script>
【讨论】：
以上是关于如何在 jquery 中自动回发后维护选定的选项卡？的主要内容，如果未能解决你的问题，请参考以下文章