jQuery - изменение изображения при нажатии на вкладку

Question

Я пытаюсь изменить изображение WordPress в зависимости от того, какая вкладка нажата.

Я хочу, чтобы изображение было заменено новым, используя эффект затухания в jQuery. Изображение должно быть относительно вкладки.

Пример ...

Если щелкнуть вкладку «my1», заменить текущие изображения на my1.jpg. Если щелкнуть вкладку «my2», заменить текущие изображения на my2.jpg

Любая помощь, высоко ценится:)

Answer 1

Похоже, используется компонент вкладок пользовательского интерфейса jQuery. Он имеет собственное событие «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');
    });
});

Индекс нажатой вкладки будет сохранен как свойство объекта аргумента пользовательского интерфейса, переданного в обратный вызов. Вы можете создать имя файла, добавив к нему «my».

Я не уверен, какое именно изображение вы хотите переключить, я предположил, что оно было главным крупным на странице. Если нет, переключите селектор li.imageslide img на тот, который нацелен на ваш элемент изображения.

Answer 2

Вот способ сделать то, что вы хотите, используя вкладки пользовательского интерфейса jQuery.Он использует событие «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);
  }
});​​​​​

В будущем я бы рекомендовал добавить больше деталей к вашему вопросу и предоставить более упрощенный пример.На вашей странице было множество скриптов, что затрудняет просмотр вашей конкретной ситуации.

Answer 3

попробуйте это: $('.ui-tabs').click(function(e) { e.stopPropagation(); });