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

Question

我正在使用带有标准选项卡结构 (http://jqueryui.com/demos/tabs/) 的 jQuery Tabs UI。我没有在此处包含所有 html，因为如果您熟悉 Tabs UI，则它是多余的。

但在这种情况下，我需要为每个活动标签显示不同的图像。 IE。当#tabone 处于活动状态时，#headerwrapper 中的不同图像和#tabtwo 处于活动状态时的另一个图像等。理想情况下，使用 fx opacity 效果淡入/淡出这些图像。

我的标签页初始化看起来像这样：

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

看来我需要这样做（根据马特的回答，如下）才能找到活动标签：

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

但我对马特的回答不满意。

这是 headerwrapper 和图像 CSS：

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

是否可以为每个选项卡显示不同的图像并在它们更改时对其进行修复（即 fx: {opacity: 'toggle'} ）？

Answer 1

你可以使用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/

Answer 2

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

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

类似的东西应该可以。您可以获得当前选择的选项卡。否则，您也可以始终使用 if/else 语句。