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