Jquery UI last clicked tab

Question

I have a few tabs with images. The idea is to show images only from the clicked tab, something like this:

$("#tabs").tabs({ show: function(event, ui) {
$('img.lazy', ui.panel).each(function(){ var imageSrc = $(this).attr("data-original-src"); $(this).attr("src", imageSrc); }); } });

But some tabs have almost 750 images. How can I stop dowload images from old tab if new tab is clicked? I think it should be something like this:

$("#tabs").tabs({
 show: function(event, ui) {
     if (oldui != null) {
         $('img.lazy', oldui.panel).each(function() { 
             $(this).attr("src", "");
         });
     }
     oldui = ui;
     $('img.lazy', ui.panel).each(function() {
         var imageSrc = $(this).attr("data-original-src");
         $(this).attr("src", imageSrc);
     });
 }

});

but how can I get last clicked tab?

Answer 1

ui.index is the current one, store this in variable on show method:

var prevTab = 0;
$("#tabs").tabs({
 show: function(event, ui) {
     if(prevTab != ui.index) {
       //do it here....
     }
     prevTab = ui.index; 
    }
});

Answer 2

看起来我们可以使用ui.oldPanel访问旧面板
$("#tabs").tabs({ select: function (event, ui) { $('img.lazy', ui.oldPanel).each(function () { $(this).attr("src", "images/card-text-bg.png"); }); $('img.lazy', ui.panel).each(function () { var imageSrc = $(this).attr("data-original"); $(this).attr("src", imageSrc); }); } });