Introduction
jQuery Tabs is easy to use, but one problem with ASP.NET is that when the page gets posted back, the active tab
is deactivated and by default, the first tab gets activated. This tip fixes this problem i.e., after postback, the same tab will be active.
This tip solves the deactivation of the active tab of jQuery tab plugin after postback in ASP.NET.
Using the Code
Create a new website in Visual Studio and add a page default.aspx.
Add the following code to default.aspx:
<head>
<title></title>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<link href="css/custom-theme/jquery-ui-1.10.1.custom.min.css"
rel="stylesheet" type="text/css" />
<script src="js/jquery-ui-1.10.1.custom.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#tabs').tabs({
activate: function () {
var newIdx = $('#tabs').tabs('option', 'active');
$('#<%=hidLastTab.ClientID%>').val(newIdx);
}, heightStyle: "auto",
active: previouslySelectedTab,
show: { effect: "fadeIn", duration: 1000 }
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="width:900px; margin:0 auto">
<div id="tabs" style="margin:0 auto; margin-bottom:2px;">
<ul>
<li><a href="#tabs-1">STATE TRACKING</a></li>
<li><a href="#tabs-2">ICONS</a></li>
<li><a href="#tabs-3">Effects</a></li>
</ul>
<div id="tabs-1">
<strong>STATE TRACKING</strong>
<p>
At any point in time, various parts of widget or interaction elements may be in various
states. jQuery UI tracks these states, and applies appropriate visual styling to them, via
a set of classes that begin with ui-state. These states include ui-state-default, uistate-
active, ui-state-focus, ui-state-highlight, ui-state-error, ui-statedisabled,
and ui-state-hover.
We can use these names in our own scripts or CSS to track state or affect the styling
of elements in the various states.</p>
</div>
<div id="tabs-2">
<strong>ICONS</strong><p>
jQuery UI defines a large number of icons that can be used by various widgets. For
example, icon indicators on the tab elements of the Tab widget, or icons directly on
Button widgets. Each icon is identified by a class name beginning with ui-icon; for
example, ui-icon-person, ui-icon-print, and ui-icon-arrowthick-1-sw.</p><p>
jQuery UI is very clever regarding how it handles icons. All the individual icon
images are defined in a grid on a single image—an icon sheet, if you will. That way,
once this image has been downloaded and cached by the browser, no further trips to
the server are needed to display any of the available icons—and there are a lot of
them (173 as this is being written). The icon class definitions merely identify how to
move the origin of this sheet image as a background image, causing the desired icon
to appear as the background of an element.</p>
</div>
<div id="tabs-3">
<strong> The jQuery UI effects</strong><p>
All of the effects that jQuery UI provides can be used on their own—without other
methods—via the effect() method. This method launches the effect on the elements
of the wrapped set.</p>
</div>
</div>
<asp:Button ID="btnSubmit" runat="server" Text="submit" />
<asp:HiddenField ID="hidLastTab" Value="0" runat="server" />
</div>
</form>
</body>
This code is to be added in default.aspx.cs:
protected void Page_Load(object sender, EventArgs e)
{
String hiddenFieldValue = hidLastTab.Value;
StringBuilder js = new StringBuilder();
js.Append("<script type='text/javascript'>");
js.Append("var previouslySelectedTab = ");
js.Append(hiddenFieldValue);
js.Append(";</script>");
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "acttab", js.ToString());
}
