如何使用Twitter Bootstrap框架淡化Tab和Tab？

jQuery UI的与设置淡入/淡出选项卡初始化标签，像这样的选项：如何使用Twitter Bootstrap框架淡化Tab和Tab？

$(".selector").tabs({ fx: { opacity: 'toggle' } });

是类似的东西可能与Twitter的引导框架标签？

来源

2012-01-18 Travis Northcutt

没有，但你可以添加你自己的，jsFiddle

$('.tabs').tabs() 
    .bind('change', function (e) { 
     $(this).next().hide().fadeIn(); 
    });

来源

2012-01-18 19:05:57 Sinetheta

查看Sanghyun的回答。这是做到这一点的正确方法。 – 2014-07-02 14:36:50

检查@bangang的答案。那是正确的。 – littlealien 2014-12-09 13:02:25

无论对于引导2和3，你可以简单地给你.tab-pane元素与加载bootstrap-transition.js一个fade类。根本不需要编写一行自己的JavaScript代码。

<div class="tab-content"> 
    <div class="tab-pane fade in active" id="home">...</div> 
    <div class="tab-pane fade" id="profile">...</div> 
    <div class="tab-pane fade" id="messages">...</div> 
    <div class="tab-pane fade" id="settings">...</div> 
</div>

代码示例来自the official Twitter Bootstrap documentation。

来源

2013-03-05 17:03:26 baxang

+20

如果我们要将淡入淡出课程全部给予它，它将隐藏所有选项卡的内容。答案将至少有一个选项卡应该在淡入淡出课程写入后工作。 – Seeker 2013-04-17 11:02:12

我相信这个答案+ @ PHPSeeker的评论是解决这个问题的更合适的解决方案，因为他们使用框架提供的功能，因此更好地回答了所述的问题（并且，个人而言，'.in'的引用为我节省了一个很多刚才的头痛） – roguesys 2013-04-30 18:53:04

这应该是被接受的答案。它也适用于Bootstrap 3. – 2014-04-16 14:15:17

如何使用Twitter Bootstrap框架淡化Tab和Tab？

回答

相关问题