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

我有Bootstrap的药丸问题。特别是即时尝试动态添加药丸。我有这个工作，但直到一个标签被点击并触发一个事件来改变活动标签类所有动态添加的内容出现在一个单一的药丸/选项卡上。Bootstrap选项卡将所有内容添加到1选项卡/药丸

<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);

所有，除了格“mynewDiv”或者说所有的内容在第一次出现在同一丸，直到我引发这改变了类“丽”的主动事件：

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

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

有没有一种方法，以确保只有最近添加的药丸的内容显示在当前的活动选项卡上？

来源

2017-01-27 D3181

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();

来源

2017-01-28 07:14:41

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

回答

相关问题