Question

我正在尝试根据点击的标签来更改WordPress图像。

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

示例...

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

任何帮助，非常感谢：）

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

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

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

3 个答案: