jQuery - 单击选项卡时更改图像答案

【问题标题】：jQuery - Change Image When Tab is ClickedjQuery - 单击选项卡时更改图像
【发布时间】：2012-04-16 16:09:14
【问题描述】：

我正在尝试根据单击的选项卡更改 WordPress 图像。

我希望使用 jQuery 的淡入淡出效果将图像替换为新图像。图片必须是相对于标签的。

示例...

如果单击“my1”选项卡，则将当前图像替换为 my1.jpg 如果单击“my2”选项卡，则将当前图像替换为 my2.jpg

任何帮助，非常感谢:)

【问题讨论】：

标签： javascript jquery wordpress tabs

【解决方案1】：

这是一种使用 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);
  }
});

以后，我建议为您的问题添加更多细节，并提供更简化的示例。您的页面上有许多脚本，因此很难查看您的具体情况。

【讨论】：

啊，抱歉，我可能无法很好地解释我想要做什么。我想将主图像“../careers-sm-930x370.jpg”换成“../Wind_turbines_by_serdarguler-930x370.jpg”
或者，或者我应该说最好。我希望它带您到幻灯片放映中的某个幻灯片。那可能会容易一些。我猜我会使用滑块哈希标签上的点击功能？我现在已将多张图片上传到幻灯片，因此您可以看到该选项的外观。

【解决方案2】：

试试这个： $('.ui-tabs').click(function(e) { e.stopPropagation(); });

【讨论】：

【解决方案3】：

看起来正在使用 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”选择器切换到针对您的图像元素的选择器。

【讨论】：