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

时间:2017-01-27 16:56:19

标签: javascript jquery html twitter-bootstrap

我遇到了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 个答案:

答案 0 :(得分:1)

See the JSFiddle Here

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

您遇到此问题的原因有哪些:

  1. 在添加id:'li'+Count,元素时,您正在使用"class":"active",激活此药丸。如果有两个药丸活跃,则两个药丸都会突出显示。

  2. 同样,在添加药丸的内容时,您正在使用

    jQuery('<div/>', {
        id: 'la'+Count,
        "class":"tab-pane active",
        "role":"tab"
    }).appendTo('#allTabs');
    
  3. 这意味着您也将新添加的药丸内容设置为活动状态,而其他药丸的内容仍处于活动状态。这就是为什么你看到所有药丸内容都显示在另一个下面的原因。

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

    根据我的小提琴,我建议你在添加药丸或其内容时不要给活跃的课程,然后在最后一个添加方法,只需以编程方式点击您想要激活的药丸。它将停用其他药丸,并使您的药丸突出显示所需的内容。

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