我想将 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');
最佳答案
您生成的 html 标记缺少几项工作。
1.) 现在你给每一个 div
元素 fade in
类,但是只有活跃的需要它,其他的只需要 fade
类。
2.) 您没有在导航列表中声明事件元素
3.) 您没有在内容区域中将事件元素标记为事件
在我的示例中,我选择第一个元素作为通过计数器标记为事件的元素。修改您的功能(调用),使其适合您的需要。调用您的函数的第一个元素现在被标记为事件。
关于jquery - 从动态添加的选项卡中删除淡入淡出效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22121998/