jquery – 如何在两个Bootstrap 3选项卡之间进行幻灯片动画?

前端之家收集整理的这篇文章主要介绍了jquery – 如何在两个Bootstrap 3选项卡之间进行幻灯片动画?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在试图找出如何在两个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);        
    }
})
原文链接:https://www.f2er.com/jquery/181077.html

猜你在找的jQuery相关文章