jquery - 如何使用动态内容动态添加选项卡？

Question

您好，我想根据来自数据库的列表使用 Jquery 动态添加选项卡。每个选项卡内容也是列表。因此，当我单击每个选项卡时，仅应显示该选项卡内容。我能够动态添加选项卡，但一次显示所有选项卡内容(数据)。我想根据选项卡单击显示列表。例如:如果单击“管理器”选项卡，则仅应显示管理器列表(如果单击)在“受训者”选项卡上，仅应显示受训者详细信息。

链接:http://www.jankoatwarpspeed.com/dynamic-tabs-using-jquery-why-and-how-to-create-it/

提前致谢

Answer 1

$('#tabs a.tab').live('click', function() {
  // Get the tab name
  var contentname = $(this).attr("id") + "_content";
  // hide all other tabs
  $("#content p").hide();
  $("#tabs li").removeClass("current");
  // show current tab
  $("#" + contentname).show();
  $(this).parent().addClass("current");
});
$('#tabs a.remove').live('click', function() {
  // Get the tab name
  var tabid = $(this).parent().find(".tab").attr("id");
  // remove tab and related content
  var contentname = tabid + "_content";
  $("#" + contentname).remove();
  $(this).parent().remove();
});

此代码使用 live() 方法，live 方法在新的 jquery 版本中已更改。你可以像这样使用 on() 方法。

 $('body').on('click','#tabs a.tab' function() {
  // Get the tab name
  var contentname = $(this).attr("id") + "_content";
  // hide all other tabs
  $("#content p").hide();
  $("#tabs li").removeClass("current");
  // show current tab
  $("#" + contentname).show();
  $(this).parent().addClass("current");
});
$('body').on('click','#tabs a.remove' function() {
  // Get the tab name
  var tabid = $(this).parent().find(".tab").attr("id");
  // remove tab and related content
  var contentname = tabid + "_content";
  $("#" + contentname).remove();
  $(this).parent().remove();
});