The scenario is this:
You have an MVC application which uses the JQuery UI Tabs implementation. Everything is fine until you make a server postback with MVC. The ‘Selected Tab’ resets to zero (the first tab). Have no fear. The solution is not hard at all.

First, create an integer property in your model to house the selected tab index. Then create a HiddenFor Helper on your page which will hold it
(like: @Html.HiddenFor(model => model.YourSelectedTab)).

Then, in your JQuery document ready section, put in this click function for the tabs:


$('#tabs').click('tabsselect', function (event, ui) {
    $("#YourSelectedTab").val($("#tabs").tabs('option', 'active'));
});

This sets the selected index of the tabs and stores it in your HiddenFor helper.

Then, on the postback, just include this statement:


$("#tabs").tabs("option", "active", $("#YourSelectedTab").val());

That’s all there is to it. When the application does a server postback, the JQuery sections will be called, and that last statement will find the last selected index and select it.

BTW – this should work with JQuery UI versions 1.9 and above.