Question

我想使用具有淡入淡出效果的Bootstrap的可切换选项卡（http://getbootstrap.com/javascript/#tabs）。当我创建一个静态HTML文件时，它可以正常工作。

但是，当通过jQuery动态添加选项卡时，fade类将从相应的DOM节点中删除，并且在选项卡之间切换时，选项卡窗格不再淡入淡出。我可以使用浏览器的开发人员工具（Chrome中的“元素”）将fade类重新添加到标签窗格，以使其再次按预期工作。所以我真的不清楚为什么fade类被删除了。：（

在插入标签窗格时，我必须执行哪些操作才能删除fade类？

以下小提琴演示了问题：http://jsfiddle.net/zabbarob/44VDD/

我在小提琴中使用的代码是

<div id="tabs">
    <ul class="nav nav-tabs"></ul>
    <div class="tab-content"></div>
</div>

和

function appendTab(title) {
    $('#tabs > .nav').append(
        '<li><a href="#' + title + '" data-toggle="tab">'
        + title + '</a></li>'
    );
    $('#tabs > .tab-content').append(
        '<div class="tab-pane fade in" id="' + title + '">'
        + 'tab pane of ' + title + '</div>'
    );
}
appendTab('First');
appendTab('Second');

Answer 1

您生成的html标记缺少一些可行的工作。

1。）现在你给每个div元素fade in类，但只有活跃的元素需要它，其他每个元素只需要fade类。

2。）您没有在导航列表中声明活动元素

3。）您没有将活动元素标记为内容区域中的活动元素

working example

在我的例子中，我选择第一个元素作为通过计数器标记为活动的元素。修改您的功能（通话），以满足您的需求。调用函数的第一个元素现在被标记为活动。

从动态添加的选项卡中删除淡化效果

1 个答案: