使用 Bootstrap 和 Ajax 创建新选项卡

Question

我有一个标签菜单，用户可以在其中添加和删除他们想要的标签。创建新选项卡时，他们可以随意命名（为此会打开一个引导模式框）。命名选项卡后，选项卡被创建，但我不知道如何处理内容。我需要为添加的每个选项卡加载相同的内容，我尝试了在网上找到的各种脚本，但似乎没有任何效果。

这是我使用的 jQuery：

$('.tabs a:last').tab('show');
        $('#createTab').click(function() {
            /* opens the modal box */
            $('#tabModal').modal();
        });
/* after clicking on a link Submit that has the id of newTab */
        $('#newTab').click(function(){
            var title = $('#myInput4').val();
            $('#tabHeaders')
                .append($('<li><a href="#' + title + '" class="tabs"><h1>'+ title +'<i class="icon-remove"></i></h1></a></li>'));
            $('#myTabContent') /* this way adding content does not really work */
                .append($('<div class="tab-pane fade in active" id="'+ title +'"></div>')); 
            $(title).tab('show');
        });
    /* tab delete */
    $('.tabs i.icon-remove').live('click', function() {
       $(this).closest('li').remove();
    });

用于添加按钮的 HTML：

<ul class="nav nav-tabs" id="tabHeaders">
  <li><a href="#" data-toggle="tab" id="createTab"><h1>&nbsp;&nbsp;<i class="icon-plus"></i>&nbsp;&nbsp;</h1></a></li>
</ul>

如果有人可以帮助我加载内容，我将不胜感激。我创建了一个文件 addTab.php，我希望将其加载到内容部分 - 当用户单击#createTab 时，首先他们选择选项卡的名称，然后将内容加载到该选项卡。

Answer 1

示例测试：

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="profile">...</div>
    <div class="tab-pane" id="messages">...</div>
    <div class="tab-pane" id="settings">...</div>
</div>

添加标签只需这样做：

$(document).on('click', '#submit_button_in_the_modal', function(event){
    event.stopPropagation();

    var title = $('#myInput4').val();
    $('#tabHeaders').append('<li><a href="#new_tab_id" data-toggle="tab">'+ title +'</a></li>');
    $('.tabs a:last').tab('show');

    //this remove the active content
    $('div.active').removeClass('active').removeClass('in');

    //this add the new content
    $('.tab-content').append('<div class="tab-pane in active" id="new_tab_id"><p> Loading content ...</p></div>');
    //with this you add the tab
    $('#myTab').append('<li><a href="#new_tab_id" data-toggle="tab">Tab Name</a></li>');
    //this shows the tab
    $('#tab a:last').tab('show');
    //this loads the content you want in the content
    $('#new_tab_id').load('addTab.php');    
})

请试试这个。