在標簽之間切換而無需重新加載圖像

Question

我對JQ / JS函數還是有點陌生​​，我自己嘗試一下...所以，這里的問題是，例如：單擊名為“ Tab1”的選項卡，然后打開圖像。 之后，如果我再次單擊相同的選項卡，圖像會向后滑動，這很好。 但我希望由於選項卡“ Tab1”已經打開並在其下加載了圖像，因此我立即切換到“ Tab2”，當我這樣做時，我將圖像加載到“ Tab2”內容下而沒有向上滑動或任何滑動，只是看起來像我第一次單擊該選項卡，所有“動畫”都平滑緩慢地滾動到底部。

jsfiddle中jq函數的JSFIDDLE示例。（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');
        }
    });
})

演示： 小提琴

Answer 2

我會這樣：

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

在這里擺弄。