jQuery - 點擊標籤時更改圖片

Question

我試圖根據點擊哪個標籤來獲取WordPress圖片進行更改。

在下面的鏈接中，我希望使用jQuery淡入淡出效果將圖像替換爲新圖像。該圖像必須相對於該選項卡。

實施例...

如果標籤 「MY1」 被點擊時，然後用my1.jpg 替換當前影像如果標籤 「MY2」 被點擊時，然後用my2.jpg替換當前圖像

http://www.gatehouse.the-digital-effect.com/tabs/

任何幫助，大加讚賞：O）

Answer 1

試試這個： $('.ui-tabs').click(function(e) { e.stopPropagation(); });

Answer 2

它看起來像使用jQuery UI標籤組件。切換選項卡時，它會自定義「tabsselect」事件。你可以挖掘它像這樣：

jQuery('#wp-tabs-1').bind('tabsselect', function(event, ui) { 
    var $img = jQuery('li.imageslide img'); 

    $img.fadeOut('slow', function() { 
     $img.attr('src', 'my' + ui.index + '.jpg'); 
     $img.fadeIn('slow'); 
    }); 
}); 

的點擊選項卡的索引將被存儲爲傳遞到回調的UI參數對象的屬性。你可以通過連接'my'來建立文件名。

我不確定您想要切換哪張圖片，我認爲它是頁面上的主要大圖片。如果沒有，請將「li.imageslide img」選擇器切換爲以圖像元素爲目標的選擇器。

Answer 3

以下是使用jQuery UI選項卡執行所需操作的方法。它使用「show」事件來檢測顯示哪個ui.panel元素。

​$('#tabs').tabs({ 
    show: function(e,ui){ 
    switch(ui.panel){ 
     case $('#tabs-1')[0]: src = 'image1.jpg'; break; 
     case $('#tabs-2')[0]: src = 'image2.jpg'; break; 
     default: src = 'default.jpg'; 
    } 
    $('#myimg').attr('src',src); 
    } 
});​​​​​ 

未來，我會建議在您的問題中添加更多細節，並提供更簡化的示例。你的頁面上有很多腳本，這使你很難看清你的具體情況。