我有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');
}
有没有办法确保只有最近添加的药丸内容显示在当前活动标签上?
1 回答
See the JSFiddle Here .
我在这里创建了一个jsFiddle来复制你所要求的行为 .
您遇到此问题的原因有以下几点:
添加id:
'li'+Count,
元素时,您正在使用"class":"active",
激活此药丸 . 如果有两个药丸活跃,则两个药丸都会突出显示 .同样,在添加药丸的内容时,你就是这样做的
这意味着您也将新添加的药丸内容设置为活动状态,而其他药丸的内容仍处于活动状态 . 这就是为什么你看到所有药丸内容显示在另一个下面的原因 .
解决上述问题 . 首先,只给那些你要突出显示的药丸或药丸内容 . 一次只有一个 .
基于我的小提琴,我建议你在添加药丸或其内容时不给活跃的课程,然后在最后一个添加方法,只需在编程上点击你想要激活的药丸 . 它将停用其他药丸,并使您的药丸突出显示所需的内容 .