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

然后將您想要的圖像的data-imgid放在tabs-headers中，如下所示：

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