引导选项卡将所有内容添加到 1 个选项卡/药丸答案

【问题标题】：Bootstrap tabs adding all content to 1 tab/pill引导选项卡将所有内容添加到 1 个选项卡/药丸
【发布时间】：2017-06-13 10:34:12
【问题描述】：

我对 Bootstrap 的药片有疑问。特别是我试图动态添加药丸。但是，在单击选项卡并触发事件以更改活动选项卡类之前，我一直在工作，所有动态添加的内容都显示在一个药丸/选项卡上。

<div id="exTab1" class="container-fluid">   
<ul  class="nav nav-pills" role="tablist" id="tabTitles">
</ul>

<div class="tab-content" id="allTabs">      
</div>

这是我用来动态添加内容的 Javascript：

Count++;
jQuery('<li/>', {
    id: 'li'+Count,
    rel: 'external',
    "class":"active",
    "data-toggle":"tab",
    "href":'#la'+Count
}).appendTo('#tabTitles');

jQuery('<a/>', {
    id: 'a'+Count,
    rel: 'external',
    "data-toggle":"tab",
    "html": title+Count
}).appendTo('#li'+Count);

jQuery('<div/>', {
    id: 'la'+Count,
    "class":"tab-pane active",
    "role":"tab"
}).appendTo('#allTabs');

jQuery('<div/>', {
    id: 'mynewDiv'+Count,
    rel: 'external',
    "class":"playground"
}).appendTo('#la'+Count);

所有这些实际上都有效，除了 div “mynewDiv” 或者更确切地说，所有内容首先出现在同一个药丸上，直到我触发一个将“li”类更改为活动的事件：

function resetTabs(){
$('#tabTitles li').each(function() {
        $(this).removeClass('active');
    });

    $(this).addClass('active');
}

有没有办法确保只有最近添加的药丸的内容才会显示在当前活动选项卡上？

【问题讨论】：

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

See the JSFiddle Here .

我在这里创建了一个 jsFiddle 来复制您所要求的行为。

为什么你会面临这个问题的几点：

在添加 id:'li'+Count, 元素时，您正在使用 "class":"active", 激活此药丸。如果有两个类处于活动状态的药丸，则两者都将突出显示。

同样，在添加药丸的内容时，您正在放入

jQuery('<div/>', {
    id: 'la'+Count,
    "class":"tab-pane active",
    "role":"tab"
}).appendTo('#allTabs');

这意味着您将新添加的药丸的内容也设置为活动状态，而其他一些药丸的内容仍处于活动状态。这就是为什么您会看到所有药片的内容都显示在一个下方。

解决上述问题。首先，将活动课程仅提供给您要突出显示的那些药丸或药丸内容。一次只有一个。

根据我的小提琴，我建议您在添加药丸或其内容时不要提供活动类，然后在最后添加方法时，只需以编程方式单击您想要激活的药丸。它将停用其他药丸，并使您的药丸以所需内容突出显示。

    $('#a'+Count).click();

【讨论】：