jquery ui tabs need to empty the previous tab when we move to next tab

I just made a script to empty the previously selected tab. It is working fine when we switch from 1 to 2 to 3.

But it is not working when we switch from 3 to 2 to 1. Here is the script

var prevTab = 0;
jQuery("#tabs").tabs({ fx: { opacity: "toggle" },
cache: false,
show: f开发者_Python百科unction(event, ui) {
alert(prevTab);
         var prevTab = ui.index;
   jQuery("#ui-tabs-"+prevTab).empty();  //set the new previous tab index to the    current index
 }

});

Since I have a form in each tab I got a conflict, so I need to empty the content of the previous tab.

Thanks for your helping hand, Gobi:)

You're creating a new local variable inside the callback function by doing var prevTab = ui.index. This way, the value is lost when you exit the function (and its scope). Use the existing prevTab instead of declaring a new instance and it should be fine

var prevTab = 0;
jQuery("#tabs").tabs({
    fx: { opacity: "toggle" },
    cache: false,
    show: function(event, ui) {
        alert(prevTab);
        prevTab = ui.index; //no var
        jQuery("#ui-tabs-"+prevTab).empty();
    }
});

or on the show you could use

$(".ui-tabs-hide").empty();