jQuery UI選項卡：顯示與每個活動選項卡的另一個div

我正在使用帶有標準選項卡結構（http://jqueryui.com/demos/tabs/）的jQuery選項卡UI。我沒有在這裏列出所有的html，因爲如果你熟悉Tabs UI，這是多餘的。jQuery UI選項卡：顯示與每個活動選項卡的另一個div

但在這種情況下，我需要做的是顯示每個活動標籤不同的圖像。即當#tabone處於活動狀態時#headerwrapper中的另一個圖像，以及#tabtwo處於活動狀態時的另一個圖像等等。理想情況下，使用fx不透明效果淡入/淡出這些圖像。

我的標籤初始化看起來是這樣的：

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它們（也即fx：{不透明度：「切換」}），因爲它們改變？

來源

2011-04-21 markratledge

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

來源

2011-04-22 01:49:52

這與我正在嘗試做的接近，但我如何交換CSS中的背景圖像？ – markratledge 2011-04-27 02:32:28

@songdogtech：我會再看看這個問題並相應地更新我的答案。 – 2011-04-27 12:07:14

@songdogtech：查看我更新的答案 - 請讓我知道它是否不符合您的要求。 – 2011-04-27 12:31:35

您可以設置圖像本身。所以，這取決於你是什麼標籤，你可以重命名圖像作爲header0，頭1，等等......你可以用

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

類似的東西應該工作。您可以獲取當前選定的選項卡。否則，您總是可以使用if/else語句。

來源

2011-04-22 01:39:18 Matt

更好的主意比我在想什麼的;我可以使用headerimg1等作爲圖像名稱。我將如何使用CSS（上面添加）和函數中的attr來考慮它是背景圖片？ – markratledge 2011-04-22 16:57:38

@songdogtech我真的從來沒有使用過jQuery和css，但是http://api.jquery.com/css/你可以操縱它。 – Matt 2011-04-22 21:15:50

jQuery UI選項卡：顯示與每個活動選項卡的另一個div

回答

相關問題