我正在试图找出如何在两个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); } })