Retain Jquery Tabs current tab across the post back

Retain JQuery Tab’s  current tab across the post back. We need to use a hidden field here to save the current tab index so we can retrieve it back on the post back. JQuery Rocks  and flying high.

ASP.Net code
<asp:HiddenField ID=”hidLastTab” runat=”server” />
<div id=”tabs”>
<li><a href=”#academicclass”>Academic Class</a></li>
<li><a href=”#academicyear”>Academic Year</a></li>
<div id=”academicclass”>
First Tab
<asp:Button ID=”Button1″ runat=”server” Text=”Post” />
<div id=”academicyear”>
Secon Tab
<asp:DropDownList ID=”DropDownList1″ runat=”server” AutoPostBack=”true”>

JQuery Code

<script type=”text/javascript”>
$(document).ready(function() {
var index = 0;
var tabIndex = $(‘#<%= hidLastTab.ClientID %>’).val();
if (tabIndex != ”) {
index = tabIndex;
select: function(event, ui) {
$(‘#<%= hidLastTab.ClientID %>’).val(ui.index);
selected: parseInt(parseInt(tabIndex))


Further help can be found here

If you are using JQuery tabs inside update panel then you have to re-initialize your tab control

function pageLoad(sender, args) {

if (args.get_isPartialLoad()) {




Comments are closed.