jquery - how to add tabs Dynamically with dynamic content.?

Question

Hi I want to add tabs dynamically using Jquery based on list coming from Database.Each tab content is also list.So when i am clicking on each tab only that tab content should be displayed. Iam able to add the tabs dynamically but all the tabs content(data) it is showing at a time.I want to display the list according to the Tab click.For eg: if clicked Manager tab only manager list should be displayed,if clicked on Trainees tab only trainees details should be displayed.

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

Thanks in Advance

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() 方法，在新的 jquery 版本中更改了 live 方法。你可以像这样使用 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();
});