我正在试图找出如何在两个Bootstrap 3选项卡之间左,右,上,下滑动.我已经搜索了网络,并且令人惊讶地没有找到任何东西.我发现最接近的是Bootstrap github上的
THIS.但是,它处理Bootstrap 2.0.2并且不再适用于Bootstrap 3.
有谁知道如何在两个Bootstrap 3标签之间向左,向右,向下(任何或所有)滑动？
这是我正在使用的基本Bootstrap 3选项卡设置.
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home"> home page content </div>
<div class="tab-pane" id="profile"> profile page content </div>
<div class="tab-pane" id="messages">message page content </div>
<div class="tab-pane" id="settings">settings content</div>
</div>
我通过以下几种方式之一激活我的标签.
$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
当我进行“显示”时,我不想仅仅切换页面,而是希望在同时在新选项卡中滑动时向左或向右“滑动”旧选项卡.即使旧标签必须首先完全滑动然后滑动新标签也是可以接受的.但是,我更喜欢前者.
解决方法
我在上一个项目中使用过更好的方法.它的
Animate.css
>非常简单
>更多效果
JavaScript的
function leftSlide(tab){
$(tab).addClass('animated slideInLeft');
}
function rightSlide(tab){
$(tab).addClass('animated slideInRight');
}
$('li[data-toggle="tab"]').on('shown.bs.tab',function (e) {
var url = new String(e.target);
var pieces = url.split('#');
var seq=$(this).children('a').attr('data-seq');
var tab=$(this).children('a').attr('href');
if (pieces[1] == "profile"){
leftSlide(tab);
}
})
