4

我使用引导站点中的示例进行了基本的选项卡式导航。如何添加动画效果（淡入和淡出），以便在单击每个选项卡时新内容淡入？

 <!--   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>
4

3 回答 3

16

为了使转换生效，应在所有选项卡窗格中添加“淡入淡出”类，并在活动窗格中添加“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>
于 2013-06-16T07:47:49.410 回答
8

正如Twitter Bootstrap 官方页面上的示例所解释的那样，您只需为 .tab-pane 元素提供一个fade类。

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

不要忘记加载bootstrap-transition.js。

于 2013-03-05T16:40:53.323 回答
0

使用 history.pushState 或 History.js 或构建https://github.com/browserstate/ajaxify

这个过程实际上是一个非常复杂且比看起来更先进的过程。

我在http://cameronspear.com的网站在内容中使用了 AJAX 的一种变体，同时更新 URL 并以漂亮的幻灯片效果进行过渡。

一个更简单的选择，您可以将所有内容放在一个页面上，并给每个部分一个唯一的 id 和一个公共类，然后使导航中的链接对应于唯一的 ID，并使用 jQuery，隐藏其他内容区域并显示被点击的那个。

这是一个简单的示例：http ://codepen.io/CWSpear/pen/naJzl

于 2012-10-11T02:56:51.760 回答