jQuery UI选项卡基于活动选项卡显示/隐藏图像

jQuery UI tabs show/hide images based on active tab

本文关键字：选项 显示 隐藏 活动 图像 UI 于活动 jQuery      更新时间：2023-09-26

我正在使用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();
    }
});

您可以在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>
相关文章：