Question

您好我想基于来自Database的列表使用Jquery动态添加标签。每个标签内容也是list.So当我点击每个标签时，只显示标签内容。我能够动态添加标签但是它一次显示所有标签内容（数据）。我想根据标签点击显示列表。例如：如果单击管理器标签，则只显示经理列表，如果点击在“培训者”选项卡上，只显示学员的详细信息。

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

如何使用动态内容动态添加选项卡。

1 个答案: