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/