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/

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

2 个答案: