jQuery UIタブアクティブなタブに基づく画像の表示/非表示

Question

jQuery UIタブウィジェットを使用しており、アクティブウィジェットに基づいて画像を表示/非表示しようとしています。

私は2列レイアウトです。左の列には3つのタブを持つウィジェットがあり、右の列には画像があります。右側の列のイメージは、アクティブなタブに応じてスワップする必要があります。なぜ私のコードは動作しないのでしょうか？どうすればいい？

jQuery(function($) { 
    //turn content into tabs 
    $("#tabs").tabs(); 

    var active2 = $("#tabs-2").tabs("option", "active"); 

    if (active2) { 
     $(".gala-img1").show(); 
     $(".gala-img2").hide(); 
     $(".gala-img3").hide(); 
    } 
}); 

Answer 1

あなたのJSでこのような何かを試すことができます。

$("#tabs").tabs({ 
    activate: function (event, ui) { 
    if (ui.newHeader[0]) { 
     $(".gala-img" + $(ui.newHeader[0]).attr('data-imgid')).show(); 
    } 
    }, 
    beforeActivate: function (event, ui) { 
    if (ui.oldHeader[0]) { 
     $(".gala-img" + $(ui.oldHeader[0]).attr('data-imgid')).hide(); 
    } 
    } 
}); 

そして、このように、あなたのタブ・ヘッダーにしたい画像のデータimgidを置く：

<li data-imgid="X">....</li>