javascript - 在不重新加载图像的情况下切换选项卡

Question

我对 JQ/JS 函数还是很陌生，我自己尝试了一些东西...所以我的问题是，例如:单击名为“Tab1”的选项卡，然后打开一个图像。之后，如果我再次单击同一个选项卡，图像会滑回，这很好。但我希望因为选项卡“Tab1”已经打开并在其下加载图像，我立即切换到“Tab2”并且当我这样做时我将图像加载到“Tab2”内容下而不向上滑动或任何东西，只是看起来像我第一次单击该选项卡时，所有平滑缓慢滚动的“动画”都显示在底部。

JSFIDDLE jsfiddle 中的 jq 函数示例。(3 个中的 1 个)

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

ps:出于某种原因，jsfiddle 不会按我的意愿加载它，但您仍然可以在那里看到问题。

Answer 1

尝试

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

演示:Fiddle