Javascript 在选项卡之间切换，无需重新加载图像

我对JQ/JS函数还是有点陌生，我自己也在尝试一些东西……所以我这里的问题是，例如：单击名为“Tab1”的选项卡，然后打开一个图像。之后，若我再次点击同一个标签，图像就会滑回，这很好。但我想知道，既然tab“Tab1”已经打开，并且在它下面加载了图像，我会立即打开“Tab2”，当我这样做时，我会在“Tab2”内容下加载图像，而不会向后滑动或做任何事情，就像我第一次点击该选项卡一样，所有的“动画”都会平滑缓慢地滚动到底部

JSFIDLE中的jq函数示例（三分之一）

ps：由于某些原因，JSFIDLE不会按照我的要求加载它，但您仍然可以看到问题所在。

试试看

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');
        }
    });
})

---

演示：

我会这样做：

$(".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");
});

---

是的，这太完美了！另外，我想问一下，每次我点击标签（Tab1、Tab2或Tab3）时，图像会像第一次一样加载，在div/容器底部缓慢滑动？谢谢，很好的Hiral。我也有同样的问题要问你，比如阿伦：）

$(".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");
});