在选项卡之间切换而不重新加载图像

switch between tabs without reloading image

本文关键字：新加载 加载 图像 选项 之间      更新时间：2024-01-29

我对JQ/JS函数还是个新手，正在自己尝试。。。所以我在这里的问题是，例如：点击名为"Tab1"的选项卡，然后打开一个图像。之后，如果我再次点击同一个选项卡，图像会向后滑动，这很好。但我想，由于选项卡"Tab1"已经打开，下面加载了图像，我会立即打开"Tab2"，当我打开时，我会在"Tab2"内容下加载图像，而不会向后滑动或任何东西，只是看起来像我第一次点击该选项卡，所有"动画"都会平滑缓慢滚动到底部。

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

    $(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不会按照我的意愿加载它，但你仍然可以看到这个问题。

尝试

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

我会这样做：

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

在这里打转

相关文章：