Bootstrap - 动态添加的嵌套选项卡

Question

我刚开始学习前端开发，真的需要一个实践项目的帮助。

我正在尝试创建 2 层嵌套选项卡，用户可以在外层添加选项卡。每个外部选项卡都有内部选项卡，用户还可以在其中添加更多内部选项卡。现在每个选项卡都将具有相同的内容，因此我使用 iframe 来完成此操作 - 如果您有更好的建议，那么我非常想听听。

我现在遇到的问题是我不知道如何将内部选项卡绑定到外部选项卡。每个外部选项卡应具有不同数量的选项卡，具体取决于用户创建的内部选项卡的数量。我似乎无法做到这一点，我所有的外部选项卡目前都具有相同的内部选项卡。

非常感谢任何帮助/输入！谢谢。

这是我的代码 sn-p：

<div class="container">
    <!-- top level tabs --> 
        <ul class="nav nav-tabs" id="topNav">
            <li class="active"><a href="#top1" data-toggle="tab">Home</a><span>x</span></li>
            <li><a href="#" class="addTop" data-toggle="tab">+ Add Tab</a></li>
        </ul>
        <div class="tabbable">
            <!--bottomNav -->
            <ul class="nav nav-tabs" id="bottomNav">
                <li class="active"><a href="#bottom1" data-toggle="tab">Test</a><span>x</span></li>
                <li><a href="#" class="addBottom" data-toggle="tab">+ Add Tab</a></li>
            </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="bottom1"><br><iframe src="form.html" width="100%" height="60%" allowtransparency="true" frameBorder="0"></iframe></div>
                </div>
            </div>
        </div>   

我的脚本：

$(document).ready(function() { 

$(".nav-tabs").on("click", "a", function(e){
      e.preventDefault();
       $(this).tab('show');
      })
    .on("click", "span", function () {
        var anchor = $(this).siblings('a');
        $(anchor.attr('href')).remove();
        $(this).parent().remove();
        $(".nav-tabs li").children('a').first().click();
    });
    /* Adding New Tabs */
    $('.addTop').click(function(e) {
        e.preventDefault();
        var id = $("#topNav").children().length; 
        $(this).closest('li').before('<li><a href="#top'+id+'">#'+ id + '</a><span>x</span></li>'); 
        //  $('.tab-content').append('<div class="tab-pane" id="top'+id+'">'+ '<br><iframe src="form.html" width="100%" height="60%" allowtransparency="true" frameBorder="0">' + '</iframe>' + '</div>');

  });
    $('.addBottom').click(function(e) {
        e.preventDefault();
        var id = $("#bottomNav").children().length; 
        $(this).closest('li').before('<li><a href="#bottom'+id+'">#'+ id + '</a><span>x</span></li>');         
        $('.tab-content').append('<div class="tab-pane" id="bottom'+id+'">'+ '<br><iframe src="form.html" width="100%" height="60%" allowtransparency="true" frameBorder="0">' + '</iframe>' + '</div>');

  });
});

Answer 1

那里有现成的解决方案，但让我们留给其他人提出建议。

回复您的问题：您的 addTop.onclick 事件仅添加一个新选项卡，但不会为该选项卡创建新的 content.tabbable。

当您为新标签添加广告时，您必须做 3 件事：

1. 创建一个新标签。
2. 为新标签创建新内容。
3. 关联事件。

显然你错过了 2 号和 3 号。

示例：

$('.addTop').click(function(e){
    e.preventDefault();

    // create new tab
    var newTab = $('<li>New Tab</li>'); 
    $('#topNav').append(newTab);

    // create new content for the new tab
    var newTabContent = $('<div class="tabbable"></div>').hide();
    $('.container').append(newTabContent);

    // associate tab to content
    newTab.click(function(){
        newTabContent.show();
        // hide others
        $('.container > .tabbable').hide();
    });
});

Answer 2

希望这会有所帮助。这是不使用iframe的解决方案

你可以在下面的jsfiddle链接中看到效果： http://jsfiddle.net/Lzfsgeq9/

基本上你需要注意的几点是：

1.使用 ahref 从父标签引导您的子标签

2.使用“on”事件监听器处理新创建的关于事件委托问题的元素

<div class="tabbable boxed parentTabs">
<ul id="topNav" class="nav nav-tabs">
    <li class="active"><a href="#top1">Tab 1</a>
    </li>
    <li><a href="#top2">Tab 2</a>
    </li>
    <li><a href="#" class="addTop" data-toggle="tab">+ Add Tab</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade active in" id="top1">
        <div class="tabbable">
            <ul id="bottomNav1" class="nav nav-tabs" data-parent="1">
                <li class="active"><a href="#bottom11">Tab 11</a>
                </li>
                <li><a href="#bottom12">Tab 12</a>
                </li>
                <li><a href="#" class="addBottom" data-toggle="tab">+ Add Tab</a></li>
            </ul>
        </div>
    </div>
    <div class="tab-pane fade" id="top2">
        <div class="tabbable">
            <ul id="bottomNav2" class="nav nav-tabs" data-parent="2">
                <li class="active"><a href="#bottom21">Tab 21</a>
                </li>
                <li><a href="#bottom22">Tab 22</a>
                </li>
                <li><a href="#" class="addBottom" data-toggle="tab">+ Add Tab</a></li>
            </ul>
        </div>
    </div>
</div>

    $("ul.nav-tabs").on("click","a",function (e) {
            e.preventDefault();  
            $(this).tab('show');
    });

    $('.addTop').click(function(e) {
            e.preventDefault();
            var id = $("#topNav").children().length; 
            $(this).closest('li').before('<li><a href="#top'+id+'">Tab'+ id + '</li>');
            createNewSubTab(id);
    });

    $('div.tab-content').on("click",".addBottom",function(e) {
        e.preventDefault();
        var parentId = $(this).closest('ul').data("parent");
        var id = $("#bottomNav" + parentId).children().length; 
        $(this).closest('li').before('<li><a href="#bottom'+parentId+id+'">Tab'+ parentId + id + '</li>'); 
   });

    var createNewSubTab = function(id){
        var bottomTabPane = $("<div></div>").attr({
            id: "top" + id,
            "class": "tab-pane fade"
        });
        var tabContainer = $("<div></div>").attr({
            "class":"tabbable"
        });
        var bottomPanel = $("<ul></ul>").attr({
                    id:"bottomNav"+id,
                    "class":"nav nav-tabs",
                    "data-parent": id
       });
       var bottomAdd = $("<li></li>").append("<a href='#' class='addBottom' data-toggle='tab'>+ Add Tab</a>");
       bottomTabPane.append(tabContainer);
       tabContainer.append(bottomPanel);
       bottomPanel.append(bottomAdd);
       $(".tab-content").append(bottomTabPane);
    }