如何动态添加新标签？

Question

I need your help,

My request is two fold. I'd like to come up with a function to be able, at the click of a button, to be able to dynamically:

1. If there are no tabs in my ul.tabs, create, and add one., then select it and display its content.

2. If there are already any tabs in my ul.tabs to add a new tab to the next tab., select it, and display its contents.

Here's what I have so far, but its far from anything 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. hide .tab_wrapper the inner div

original:

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

edit:

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

2. get the first child id, and show tab content

original:

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

edit:

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

3. hide .tab_wrapper the inner div, and show tab content

original:

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

edit:

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