Question

我还是JQ / JS函数的新手，并且自己尝试一下......所以我的问题是，例如：点击名为“Tab1”的标签，然后打开图像。之后，如果我再次点击同一个标签，图像会向后滑动，这很好。但我想要，因为标签“Tab1”已经打开，其下载有图像，我立即切换“Tab2”，当我这样做时，我得到的图像加载在“Tab2”内容下，没有滑动回来或任何东西，只是为了看起来像我第一次点击该标签，所有“动画”平滑慢滚动到底部。

JSFIDDLE jsfiddle里面的jq函数的例子。（1/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：由于某些原因，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

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

Fiddle here.

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

2 个答案: