jQuery UI選項卡基於活動選項卡顯示/隱藏圖像

Question

我正在使用jQuery UI選項卡窗口小部件，我試圖根據活動窗口小部件顯示/隱藏圖像。

我有一個雙列布局;左列有三個選項卡的選項卡小部件，右列具有圖像;根據活動選項卡，右列中的圖像應該交換。看看api和其他帖子爲什麼我的代碼不工作？我會怎麼做？

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>