I have some listed tab controls on my aspx form which is as below
<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>
The navigation on mouse click on a tab is done by the following:
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>
Now, my question is, How can i maintain the selected tab as it is even after postback. For Example, I select Tab B that contains a Button which causes a postback on click. After the postback occurs Tab A regians the foucs and i have to manually select Tab B for adjuvent operations.
Please help me to solve this problem.
I think this Code will help you...
<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";
}
Initialize tabs with the cookie option specified. Sample
$(function () {
$("#tabs").tabs({ cookie: { expires: 30 } });
});
You need the jQuery Cookie plugin..
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With