javascript - Bootstrap 选项卡将所有内容添加到 1 个选项卡/药丸

Question

我对 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');
}

有没有办法确保当前事件选项卡上仅显示最近添加的药丸内容？

Answer 1

See the JSFiddle Here.

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

关于您为何面临此问题的一些要点:

1. 在添加 id:'li'+Count, 元素时，您可以使用 "class":"active", 使该药丸处于事件状态。如果有两个具有 active 类别的药丸，则两者都会突出显示。

2. 同样，在添加药丸内容时，您正在添加

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

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

解决上述问题。首先，仅将事件类赋予那些您想要突出显示的药丸或药丸内容。一次只能有一个。

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

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