jQuery - タブがクリックされたときに画像を変更する

Question

クリックするとどのタブがクリックされるかに基づいて、変更するワードプレス画像を取得しようとしています。

以下のリンクで、jQueryのフェード効果を使用してイメージを新しいイメージに置き換えます。画像はタブに対して相対的でなければなりません。その後、

例...

タブ "MY1" をクリックすると、タブ "MY2" をクリックした場合my1.jpg と現在の画像を置き換え、その後、my2.jpg

http://www.gatehouse.the-digital-effect.com/tabs/と現在の画像を置き換えます

すべてのヘルプ、感謝します。o）

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

将来的には、より具体的な質問を追加し、より簡単な例を提供することをおすすめします。あなたのページには数多くのスクリプトがあり、あなたの特定の状況を見ることは困難です。