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

然后在你的标签页中添加你想要的图像的数据 - 如下所示：

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

jQuery UI选项卡根据活动选项卡显示/隐藏图像

1 个答案: