如何在两个 Bootstrap 3 选项卡之间制作幻灯片动画? [英] How to do a slide animation between two Bootstrap 3 tabs?

问题描述

我想弄清楚如何在两个 Bootstrap 3 选项卡之间向左、向右、向上、向下滑动.
我在网上搜索过，令人惊讶的是没有找到任何东西.
最接近的我发现的是 THIS 在 Bootstrap github 上.但是，它适用于 Bootstrap 2.0.2，不再适用于 Bootstrap 3.

有人知道如何在两个 Bootstrap 3 选项卡之间向左、向右、向上滑动(任意或全部)吗?

这是我使用的基本 Bootstrap 3 选项卡设置.

<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">消息</a></li><li><a href="#settings" data-toggle="tab">设置</a></li>
<!-- 标签窗格--><div class="tab-content"><div class="tab-pane active" id="home">主页内容

<div class="tab-pane" id="profile">个人资料页面内容

<div class="tab-pane" id="messages">消息页面内容</div><div class="tab-pane" id="settings">设置内容</div>

我通过以下几种方式之一激活我的标签.

$('#myTab a[href="#profile"]').tab('show')//按名称选择标签$('#myTab a:first').tab('show')//选择第一个标签$('#myTab a:last').tab('show')//选择最后一个标签$('#myTab li:eq(2) a').tab('show')//选择第三个选项卡(0-indexed)

我不想在显示"时只切换页面，我想将旧标签向左或向右滑动"，同时在新标签中滑动.即使旧标签必须先滑出然后滑动新标签也是可以接受的.不过，我更喜欢前者.

解决方案

我在上一个项目中使用了更好的方法.它的 Animate.css

1. 非常简单
2. 更多效果

JavaScript

function leftSlide(tab){$(tab).addClass('animated slideInLeft');}功能右滑(标签){$(tab).addClass('animated slideInRight');}$('li[data-toggle="tab"]').on('shown.bs.tab', function (e) {var url = new String(e.target);varpieces = url.split('#');var seq=$(this).children('a').attr('data-seq');var tab=$(this).children('a').attr('href');如果(件[1] ==个人资料"){左滑动(标签)；}})

I'm trying to figure out how to do a slide left, right, up, down between two Bootstrap 3 tabs.
I have searched the web and surprisingly have not found anything.
The closest thing I found was THIS on Bootstrap github. However, it deals with Bootstrap 2.0.2 and no longer works for Bootstrap 3.

Does anybody know how to slide left, right, up down (any or all) between two Bootstrap 3 tabs?

Here is the basic Bootstrap 3 tab setup that I am using.

<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>

I activate my tabs in one of these several ways.

$('#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)

Instead of just switching pages when I do a 'show' I would like to 'slide' the old tab off to the left or right while sliding in the new tab at the same time. Even if the old tab had to slide all the way off first then slide the new tab would be acceptable. However, I prefer the former.

解决方案

There is better way I have used in my last project. Its Animate.css

1. Very Easy
2. More Effects

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);        
    }
})

这篇关于如何在两个 Bootstrap 3 选项卡之间制作幻灯片动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！