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>