Question

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

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

Example…

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 🙂

Answer 1

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.