jquery - 从动态添加的选项卡中删除淡入淡出效果

Question

我想将 Bootstrap 的可切换选项卡 ( http://getbootstrap.com/javascript/#tabs ) 与淡入淡出效果结合使用。当我创建一个静态 HTML 文件时，它工作得很好。

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

我必须做什么才能在插入选项卡 Pane 时不删除 fade 类？

以下 fiddle 演示了问题:http://jsfiddle.net/zabbarob/44VDD/

我在 fiddle 中使用的代码是

<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

在我的示例中，我选择第一个元素作为通过计数器标记为事件的元素。修改您的功能(调用)，使其适合您的需要。调用您的函数的第一个元素现在被标记为事件。