jQuery-单击选项卡时更改图像 [英] jQuery - Change Image When Tab is Clicked

问题描述

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

I am trying to get a WordPress image to change based on which tab is clicked.

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

I want the image to be replaced with a new image using jQuery's fade effect. The image must be relative to the tab.

示例...

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

If tab "my1" is clicked, then replace current images with my1.jpg If tab "my2" is clicked, then replace current images with my2.jpg

任何帮助，非常感谢:)

Any help, much appreciated :)

推荐答案

以下是使用jQuery UI选项卡执行所需操作的一种方法.它使用"show"事件来检测正在显示哪个ui.panel元素.

Here is a way to do what you want using jQuery UI tabs. It uses the "show" event to detect which ui.panel element is being displayed.

​$('#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);
  }
});​​​​​

将来，我建议为您的问题添加更多细节，并提供一个更简化的示例.您的页面上有许多脚本，这使您很难看清自己的具体情况.

In the future, I'd recommend adding more specifics to your question, and providing a more simplified example. Your page had numerous scripts on it, which makes it difficult to look at your specific situation.

这篇关于jQuery-单击选项卡时更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！