jQuery UI选项卡：显示每个活动选项卡的另一个div

Question

我正在使用带有标准选项卡结构的jQuery Tabs UI（ http://jqueryui.com/demos/tabs/ ）。 我没有在这里包含所有的HTML，因为如果你熟悉Tabs UI，这是多余的。

但在这种情况下，我需要做的是为每个活动选项卡显示不同的图像。 即当#tabone处于活动状态时#headerwrapper中的另一个图像和#tabtwo处于活动状态时的另一个图像等。理想情况下，使用类似fx不透明效果的图像淡入/淡出这些图像。

我的标签init看起来像这样：

var $tabs= $("#tabs").tabs({
    }); 

看起来我需要这样做（根据Matt的答案，下面）以找到活动标签：

$('#tabs').tabs({
select: function(event, ui) { .... });

但我对Matt的回答没有运气。

这是headerwrapper和图像CSS：

#headerwrapper {
background: url(images/image.jpg) top center no-repeat;
height:88px;
}

是否有可能为每个标签显示不同的图像，并在它们发生变化时fx它们（即fx：{opacity：'toggle'}）？

Answer 1

您可以设置图像本身。 因此，根据您所使用的选项卡，您可以将图像重命名为header0，header1等...您可以使用

$('#example').tabs({
    select: function(event, ui) {
        var selected = $('#example').tabs('option', 'selected');
        $("#headerimg").attr("src", "/new/image/header" + selected + ".jpg");
    }
});

这样的事情应该有效。 您可以获取当前选定的选项卡。 否则，您也可以始终使用if / else语句。

Answer 2

您可以使用data-*属性：

$("#tabs").tabs({
    select: function($event, ui) {
        /* Extract the image from the active tab: */
        var img = $(ui.panel).data("image");

        /* Animate the header out, set the background css, then animate back in: */
        $("#headerwrapper")
            .animate({ opacity: 'toggle' }, function() {
                $(this).css("background-image", "url(" + img + ")")
                    .animate({ opacity: 'toggle' });
            });
    }
});

每个选项卡面板都会定义data-image ：

<div id="tabs-1" data-image="http://placekitten.com/g/300/88">...</div>

这是一个有效的例子： http ： //jsfiddle.net/8muBm/2/