Question

我需要你的帮助，

我的要求是双重的。我想提出一个功能，只需点击一下按钮，就可以动态：

如果我的ul.tabs中没有选项卡，请创建并添加一个。，然后选择它并显示其内容。
如果我的ul.tabs中已有任何标签要添加新标签到下一个标签页面，请选择它并显示其内容。

这是我迄今为止所拥有的，但它远非任何动态：

$(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。隐藏内部div .tab_wrapper，并显示标签内容

原文：

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

编辑：

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

如何动态添加新标签？

1 个答案: