Twitter引导程序 - 将动画/过渡效果添加到选项卡式导航

Question

我使用bootstrap站点中的示例进行基本的选项卡式导航.如何添加动画效果(淡入淡出),以便在单击每个标签时新内容淡入？

 <!--   i have a basic tabbed navigation using the example from the bootstrap site. how can i add an animation effect (fade in and out) so when each tab is clicked the new content is faded in? -->

    <div class="tabbable">
      <ul class="nav nav-tabs nav-stacked span3">
         <li class="active">
          <a href="#myDashboardNav" data-toggle="tab">
        <i class="icon-align-justify"></i>
        My dashboard 
        <span class="badge badge-important">20%</span>
            </a>

    </li>
    <li id="myfeed">
    <a href="#myFeedNav" data-toggle="tab">
    <i class="icon-list-alt"></i>
    My feed   
    <span class="badge badge-important">6</span>
    </a>
    </li>
    <li id="notifications">
    <a href="#notificationsNav" data-toggle="tab">
    <i class="icon-time"></i>
    Notifications <span class="badge badge-important">9</span>
    </a>
    </li>
    </ul>

    <div class="tab-content span8">
    <div class="tab-pane well active" id="myDashboardNav" style="height: 330px">Content1
    </div>
    <div class="tab-pane well" id="myFeedNav" style="height: 330px">Content2

    </div>

    <div class="tab-pane well" id="notificationsNav" style="height: 330px">Content3

    </div>

    </div>

    </div>

Answer 1

要使转换工作,应在活动窗格的所有选项卡窗格和类"in"上添加"淡入淡出"类.(以下代码是Bootstrap中的一个示例,已编辑为包含转换)

注意:此代码适用于Bootstrap 2.对于v3,请参阅文档

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active fade in" 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>

<script>
$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})
</script>

Answer 2

您只需要为.tab-pane元素提供一个fade类,就像Twitter Bootstrap官方页面上的示例所解释的那样.

<div class="tab-pane active fade in" ...>

别忘了加载bootstrap-transition.js.