如何动态地将另一个选项卡添加到引导选项卡

Question

我想通过Bootstrap3中的模态动态添加选项卡来添加垂直选项卡。

同样，在每个标签中，我们都可以编辑标签标题或轻松地将其删除。

可以通过javascript或JQuery实现。

我已附上图片。

Answer 1

下面的工作示例，带有自定义代码javascript和jquery

 var button='<button class="close" type="button" title="Remove this page">×</button>'; var tabID = 1; function resetTab(){ var tabs=$("#tab-list li:not(:first)"); var len=1 $(tabs).each(function(k,v){ len++; $(this).find('a').html('Tab ' + len + button); }) tabID--; } $(document).ready(function() { $('#btn-add-tab').click(function() { tabID++; $('#tab-list').append($('<li><a href="#tab' + tabID + '" role="tab" data-toggle="tab"><span>Tab ' + tabID + '</span> <span class="glyphicon glyphicon-pencil text-muted edit"></span> <button class="close" type="button" title="Remove this page">×</button></a></li>')); $('#tab-content').append($('<div class="tab-pane fade" id="tab' + tabID + '">Tab ' + tabID + ' content</div>')); $(".edit").click(editHandler); }); $('#tab-list').on('click', '.close', function() { var tabID = $(this).parents('a').attr('href'); $(this).parents('li').remove(); $(tabID).remove(); //display first tab var tabFirst = $('#tab-list a:first'); resetTab(); tabFirst.tab('show'); }); var list = document.getElementById("tab-list"); }); var editHandler = function() { var t = $(this); t.css("visibility", "hidden"); $(this).prev().attr("contenteditable", "true").focusout(function() { $(this).removeAttr("contenteditable").off("focusout"); t.css("visibility", "visible"); }); }; $(".edit").click(editHandler); 

 [contenteditable] { border: solid 1px lightgreen; padding: 5px; border-radius: 3px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <p> <button id="btn-add-tab" type="button" class="btn btn-primary pull-right">Add Tab</button> </p> <!-- Nav tabs --> <ul id="tab-list" class="nav nav-tabs" role="tablist"> <li class="active"><a href="#tab1" role="tab" data-toggle="tab"><span>Tab 1 </span><span class="glyphicon glyphicon-pencil text-muted edit"></span></a></li> </ul> <!-- Tab panes --> <div id="tab-content" class="tab-content"> <div class="tab-pane fade in active" id="tab1">Tab 1 content</div> </div> </div> </div> </div>