Question

我刚开始学习前端开发＆amp;真的需要帮助练习项目。

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

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

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

这是我的代码段：

<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。

当您添加新标签时，您必须执行以下三项操作：

创建一个新标签。
为新标签创建新内容。
关联活动。

显然你错过了2号和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);
    }

Bootstrap - 动态添加嵌套选项卡

2 个答案: