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); 
    } 
});​​​​​ 

未来，我会建议在您的问题中添加更多细节，并提供更简化的示例。你的页面上有很多脚本，这使你很难看清你的具体情况。