在标签之间切换而无需重新加载图像

Question

Im kinda still new to JQ/JS functions, and trying something by myself...so my issue here is that, for example: click on tab named "Tab1" and then an image gets opened. After that if i click again on that very same tab, image slides back, which is fine. But i want that since tab "Tab1" is already opened with image loaded under it, i switch immediately on "Tab2" and when i do that i get image loaded under "Tab2" content without sliding back up or anything, just to look like i first time clicked on that Tab, with all "animations" of smooth slow scroll to the bottom.

JSFIDDLE example of jq function inside jsfiddle.(1 out of 3)

    $(document).ready(function(){
  $('#inside1').click(function() {
    $("#panel").css('background-image', 'url(http://upload.wikimedia.org/wikipedia/commons/1/1f/Nsr-slika-015.png)');
  });
});

ps: from some reason jsfiddle wont load it as i want, but you still can see the issue there.

Answer 1

Try

jQuery(function ($) {
    var $panel = $("#panel");
    var $tabs = $('.tab').click(function () {
        var $this = $(this),
            isActive = $this.hasClass('active');
        if ($panel.is(':visible') && !isActive) {
            $panel.css('background-image', 'url(' + $this.data('background') + ')');
            $tabs.removeClass('active');
            $this.addClass('active');
        } else {
            if (!isActive) {
                $panel.css('background-image', 'url(' + $this.data('background') + ')');
            }
            $panel.slideToggle();
            $this.toggleClass('active');
        }
    });
})

Demo: Fiddle

Answer 2

I would do it this way:

$(".tab").click(function () {
    var id = $(this).attr("id");
    id = id.substr(id.length - 1, 1);
    if ($(this).hasClass("open")) {        
        $("#panel").slideUp();
    } else {
        $(".tab.open").removeClass("open");
        if ($("#panel").is(":hidden")) {
            $("#panel").slideDown();            
        }
        $("#panel").removeAttr("class");
            $("#panel").addClass("panel" + id);
    }
    $(this).toggleClass("open");
});

Fiddle here.