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

前端之家收集整理的这篇文章主要介绍了jquery – 如何在两个Bootstrap 3选项卡之间进行幻灯片动画?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在试图找出如何在两个Bootstrap 3选项卡之间左,右,上,下滑动.我已经搜索了网络,并且令人惊讶地没有找到任何东西.我发现最接近的是Bootstrap github上的 THIS.但是,它处理Bootstrap 2.0.2并且不再适用于Bootstrap 3.

有谁知道如何在两个Bootstrap 3标签之间向左,向右,向下(任何或所有)滑动?

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

  1. <ul class="nav nav-tabs">
  2. <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  3. <li><a href="#profile" data-toggle="tab">Profile</a></li>
  4. <li><a href="#messages" data-toggle="tab">Messages</a></li>
  5. <li><a href="#settings" data-toggle="tab">Settings</a></li>
  6. </ul>
  7.  
  8. <!-- Tab panes -->
  9. <div class="tab-content">
  10. <div class="tab-pane active" id="home"> home page content </div>
  11. <div class="tab-pane" id="profile"> profile page content </div>
  12. <div class="tab-pane" id="messages">message page content </div>
  13. <div class="tab-pane" id="settings">settings content</div>
  14. </div>

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

  1. $('#myTab a[href="#profile"]').tab('show') // Select tab by name
  2. $('#myTab a:first').tab('show') // Select first tab
  3. $('#myTab a:last').tab('show') // Select last tab
  4. $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

当我进行“显示”时,我不想仅仅切换页面,而是希望在同时在新选项卡中滑动时向左或向右“滑动”旧选项卡.即使旧标签必须首先完全滑动然后滑动新标签也是可以接受的.但是,我更喜欢前者.

解决方法

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

>非常简单
>更多效果

JavaScript的

  1. function leftSlide(tab){
  2. $(tab).addClass('animated slideInLeft');
  3. }
  4.  
  5. function rightSlide(tab){
  6. $(tab).addClass('animated slideInRight');
  7. }
  8.  
  9. $('li[data-toggle="tab"]').on('shown.bs.tab',function (e) {
  10. var url = new String(e.target);
  11. var pieces = url.split('#');
  12. var seq=$(this).children('a').attr('data-seq');
  13. var tab=$(this).children('a').attr('href');
  14. if (pieces[1] == "profile"){
  15. leftSlide(tab);
  16. }
  17. })

猜你在找的jQuery相关文章