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

トランジションを機能させるには、クラス「フェード」をすべてのタブペインに追加し、クラス「イン」をアクティブペインに追加する必要があります。（以下のコードは、トランジションを含むように編集された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を更新し、優れたスライド効果で移行しています。

より簡単な方法として、すべてのコンテンツを1つのページに配置し、各セクションに一意のIDと共通のクラスを指定してから、ナビゲーション内のリンクを一意のIDに対応させ、jQueryを使用して他のコンテンツ領域を非表示にすることができます。クリックしたものを表示します。

その簡単なサンプルを次に示します：http：//codepen.io/CWSpear/pen/naJzl

于 2012-10-11T02:56:51.760 に答える