は、どのように私は動的に新しいタブを追加することができますか？

Question

私は

私の要求が2倍である、あなたの助けを必要としています。私ul.tabsにはタブが存在しない場合は、

1. 作成し、1を追加します。私は、動的にできるようにするには、ボタンをクリックするだけで、できるようにする機能を思い付くしたいのですがを選択し、その内容を表示します。

2. すでに次のタブに新しいタブを追加するために、私のul.tabsのいずれかのタブがある場合は、それを選択し、その内容を表示します。

は、ここで私がこれまで持っているものだが、そのはるかdymanic何から：

$(document).ready(function() { 

    //Default Action 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
    $(".tab_content:first").show(); //Show first tab content 

    //On Click Event 
    $("ul.tabs li").click(function() { 
     $("ul.tabs li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".tab_content").hide(); //Hide all tab content 
     var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active content 
     return false;  
    }); 

}); 


<div id="main" style="visibility: visible; display: inline-block;"> 

    <ul class="tabs"> 
     <li><a href="#tab1">XAL-2107-482336</a></li> 
     <li><a href="#tab2">A-2017-00471</a></li> 
    </ul> 

    <div class="tab_container"> 

     <div class="tab_wrapper"> 

      <!--BEGIN DIV TAB 1 --> 
      <div id="tab1"></div> 
      <!--END DIV TAB 1 --> 

      <!--BEGIN DIV TAB 2 --> 
      <div id="tab2"></div> 
      <!--END DIV TAB 2 --> 

     </div><!-- END DIV tab_wrapper --> 

    </div><!-- END DIV tab_container --> 

</div><!-- END DIV main --> 

Answer 1

1.非表示.tab_wrapper、内側のdiv

元：

$(".tab_content").hide(); 

編集：

$(".tab_wrapper").find("div").hide(); 

2.最初の子IDを取得し、表示するタブのコンテンツ

元：

$(".tab_content:first").show(); 

は、編集：

var tab_id = $("ul.tabs li:first a").attr("href"); 
$(tab_id).show(); 

3.非表示.tab_wrapper、内側のdiv 、およびshowタブのコンテンツ

元：

$(".tab_content").hide(); 
var activeTab = $(this).find("a").attr("href"); 

編集：

$(".tab_wrapper").find("div").hide(); 
var activeTab = $(this).find("a").attr("href");