我正在尝试弄清楚如何在两个 Bootstrap 3 选项卡之间向左、向右、向上、向下滑动。
我在网上进行了搜索,但令人惊讶的是没有找到任何内容。
我发现的是THIS在 Bootstrap github 上。但是,它适用于 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);
}
})
关于jquery - 如何在两个 Bootstrap 3 选项卡之间制作幻灯片动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21707982/