Question

我想在我的树枝中动态添加删除标签，我找到了源代码Dynamically add/remove new tab但是当我点击＆＃34;添加标签＆＃34;什么都没发生，请你帮帮我，这是我的枝条：

{% block javascripts %}
{{ parent() }}

<script type="text/javascript" >

    $(doument).ready();

    var pageNum = 1;
    $('#btnAdd').click(function () {
        var nextTab = $('#tabs li').size()+1;

        $('<li><a href="#tab'+nextTab+'" data-toggle="tab">Tab '+nextTab+'</a></li>').appendTo('#tabs');

        $('<div class="tab-pane" id="tab'+nextTab+'">tab' +nextTab+' content</div>').appendTo('.tab-content');

        $('#tabs a:last').tab('show');
    });    
    $('#btnAdd').click(function () {
        var nextTab = $('#tabs li').size()+1;
        $('<li><a href="#tab'+nextTab+'" data-toggle="tab">Tab '+nextTab+'</a></li>').appendTo('#tabs');

        $('<div class="tab-pane" id="tab'+nextTab+'">tab' +nextTab+' content</div>').appendTo('.tab-content');
        $('#tabs a:last').tab('show');
    }); 
</script>
{% endjavascripts %}
{% endblock %}

{% block sonata_admin_content %}

<a href="javascript:;" id="btnAdd"><i class="icon-plus-sign-alt"></i> Add Tab</a>

<ul class="nav nav-tabs hidden-print" role="tablist" id="tabPanel">
   <li classe="active"><a id="tab_form" href="#formulaire" role="tab" data-toggle="tab">Formulaire</a></li>
   <li><a id="tab_form" href="#formulaire" role="tab" data-toggle="tab">Tableau de bord</a></li>
</ul>

<div class="tab-content">

    <div class="tab-pane" id="formulaire">
        <div class="stats-content">
            <div class="connectedSortable ui-sortable">
                {% include 'TechappStatsBundle:Stats:form.html.twig' %}
            </div>
        </div>
    </div>    
</div>
{% endblock %}

Answer 1

单击添加按钮

使用这个

var nextTab = $("#tabPanel li").length+1;
//Add tab button to ul
$("#tabPanel").append("<li><a href='#tab"+nextTab+"' data-toggle='tab'>tab"+nextTab+"</a></li>");

//Add Tab Content
$(".tab-content").append("<div id='tab"+nextTab+"' class='tab-pane'>tab"+
nextTab+"Content</div>");

使用bootstrap / twig动态添加新选项卡

1 个答案: