jQuery - Change Image When Tab is Clicked

问题:

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 :)

回答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.

回答2:

try this: $('.ui-tabs').click(function(e) { e.stopPropagation(); });

回答3:

It looks like the jQuery UI tabs component is being used. It has a custom "tabsselect" event when the tabs are switched. You could tap into it as so:

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

The index of the clicked tab will be stored as a property of the ui argument object passed into the callback. You could build the file name by concatenating 'my' to it.

I'm not sure exactly what image you want switched, I assumed it was the main large one on the page. If not, switch out the 'li.imageslide img' selector to the one that targets your image element.