[英]How can i keep the selected tab selected even after postback
我的aspx表单上有一些列出的选项卡控件,如下所示
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab A</a></li>
<li><a href="#tabs-2">Tab B</a></li>
<li><a href="#tabs-3">Tab C</a></li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"><asp:Button ID="someid" runat="server"/></div>
<div id="tabs-3"></div>
</div>
鼠标单击选项卡上的导航由以下内容完成:
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>
现在,我的问题是,即使在回发之后,我如何维护所选标签。 例如,我选择包含按钮的选项卡B,该按钮会在单击时产生回发。 在回发发生后,选项卡A对f进行注册,我必须手动选择选项卡B进行辅助操作。
请帮我解决这个问题。
我认为本准则会对您有所帮助......
<div id="tabs">
<asp:HiddenField ID="hidtab" Value="0" runat="server" />
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
</ul>
<div id="tabs-1">
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click"/>
</div>
<div id="tabs-2">
<asp:Button ID="Button2" runat="server" Text="Submit" OnClick="Button2_Click"/>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var st= $(this).find("input[id*='hidtab']").val();
if (st== null)
st= 0;
$('[id$=tabs]').tabs({ selected: st});
});
</script>
protected void Button1_Click(object sender, EventArgs e)
{
hidtab.Value = "0";
}
protected void Button2_Click(object sender, EventArgs e)
{
hidtab.Value = "1";
}
您可以像在此帖子中一样通过您的网址跟踪它。 以下代码仅作为示例,可以做得更好。 我使用了jquery ui选项卡中的active
属性。 它适用于元素的索引,但也许它与#hash一起工作并没有测试它。 所以在下面的例子中,我得到了标签的索引,并将其与active
属性一起使用;
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab A</a></li>
<li><a href="#tabs-2">Tab B</a></li>
<li><a href="#tabs-3">Tab C</a></li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"><asp:Button ID="someid" runat="server"/></div>
<div id="tabs-3"></div>
</div>
<script type="text/javascript">
$(function () {
var tabsOpts = {},
activeTab, activeTabIndex,
urlCheck = doucment.location.href.split('#');
// urlCheck is an array so when there is more then one result
// there is a hash found in the URL
if( urlCheck.length > 1 ) {
activeTab = urlCheck[1];
// getting the index from the link
activeTabIndex = $("#tabs li a[href="+ activeTab +"]").index();
// create new object options for the tabs
tabsOpts = { active: activeTabIndex };
}
$("#tabs").tabs(tabsOpts)
.find('li a').each(function() {
// get URL from the tab href
var href = $.data(this, 'href.tabs');
// set URL with the href from your tab
document.location = href;
});
});
</script>
客户端解决方案:
<script type="text/javascript"> Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(IniciaRequest); Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); var currentTab; function IniciaRequest(sender, arg) { var _Instance = Sys.WebForms.PageRequestManager.getInstance(); if (_Instance.get_isInAsyncPostBack()) { window.alert("Existe un proceso en marcha. Espere"); arg.set_cancel(true); } } function BeginRequestHandler(sender, args) { //Persiste el valor del indice del TAB actual del control Jquery para mantener el tab actual seleccionado luego del Postback. if ($get('hdCurrentTab') != null) { currentTab = $get('hdCurrentTab').value; } //---- } function EndRequestHandler(sender, args) { //Permite visualiza el control JQuery TAB dentro de ventanas modales AJAX. if (sender._postBackSettings.panelsToUpdate != null) { $("#tabs").tabs(); //Persiste el valor del indice del TAB actual del control Jquery para mantener el tab actual seleccionado luego del Postback. if ($get('hdCurrentTab') != null) { $get('hdCurrentTab').value = currentTab; $("#tabs").tabs({ active: currentTab }); } //---- } //---- } </script>
页面上的HTML:
<input id="hdCurrentTab" type="hidden" value="0" /> <div id="tabs" style="width:97%;margin: auto; font-family: verdana, tahoma, arial, sans-serif; font-size: 11px;"> <ul> <li><a href="#tabs-1" onclick="$get('hdCurrentTab').value = '0';">TAB1</a></li> <li><a href="#tabs-2" onclick="$get('hdCurrentTab').value = '1';">TAB2</a></li> </ul> <div id="tabs-1"></div> <div id="tabs-2"></div> </div>
回发后TAB仍处于选中状态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.