2

こんにちは、データベースからのリストに基づいて Jquery を使用してタブを動的に追加したいと考えています。各タブのコンテンツもリストです。各タブをクリックすると、そのタブのコンテンツのみが表示されます。タブを動的に追加することはできますが、一度に表示されるすべてのタブのコンテンツ (データ) が表示されます。タブのクリックに応じてリストを表示したいと考えています。 [研修生] タブでは、研修生の詳細のみを表示する必要があります。

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

前もって感謝します

4

1 に答える 1

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();
});
于 2014-03-02T21:02:06.887 に答える