jQuery Twitter bootstrap - 向选项卡式导航添加动画/过渡效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12831188/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap - Add animation / transition effect to tabbed navigation
提问by GeV 126
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?
我使用引导程序站点中的示例进行了基本的选项卡式导航。如何添加动画效果（淡入淡出），以便在单击每个选项卡时新内容淡入？
<!-- 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>
回答by Saneem
For transitions to work, the class "fade" should be added on all tab-panes and class "in" on the active pane. (The code below is an example from Bootstrap, edited to include transitions)
为了使过渡起作用，应在所有选项卡窗格上添加“淡入淡出”类，并在活动窗格上添加“进入”类。（下面的代码是 Bootstrap 的一个例子，经过编辑以包含转换）
Note: This code is for Bootstrap 2. For v3, see the docs
注意：此代码适用于 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>
回答by baxang
You simply need to give your .tab-pane elements a fadeclass as the exampleon the Twitter Bootstrap's official page explains.
你只需要给你的 .tab-pane 元素一个fade类，就像Twitter Bootstrap 官方页面上的例子解释的那样。
<div class="tab-pane active fade in" ...>
Don't forget to load bootstrap-transition.js.
不要忘记加载bootstrap-transition.js.
回答by CWSpear
Use history.pushState or History.js or build off of https://github.com/browserstate/ajaxify
使用 history.pushState 或 History.js 或基于https://github.com/browserstate/ajaxify
This process is actually a pretty complicated and more advanced process than it might seem.
这个过程实际上是一个比看起来更复杂和更高级的过程。
My site at http://cameronspear.comuses a variation of this to AJAX in the content while updating the URL and transitioning with a nice slide effect.
我在http://cameronsspear.com 上的站点在内容中使用 AJAX 的变体，同时更新 URL 并以漂亮的幻灯片效果过渡。
A simpler alternative, you could put all of the content on one page, and give each section a unique id, and a common class, and then make the links in the nav correspond to the unique IDs and with jQuery, hide the other content areas and show the one that was clicked.
一个更简单的选择，你可以把所有的内容放在一个页面上，给每个部分一个唯一的 id 和一个公共类，然后使导航中的链接与唯一的 ID 相对应，并使用 jQuery 隐藏其他内容区域并显示被点击的那个。
Here's a simple sample of that: http://codepen.io/CWSpear/pen/naJzl
这是一个简单的示例：http: //codepen.io/CWSpear/pen/naJzl
