Question

我对Bootstrap选项卡有一点困难。

基本上我将这些标签用于演示网站，我有以下HTML结构。

HTML：

<ul class="nav nav-tabs" id="myTab">
                <li class="active"><a href="#sectionA">General fitness</a></li>
                <li><a href="#sectionB">Cardio</a></li>
                <li><a href="#sectionC">weight training</a></li>
                <li><a href="#sectionD">weight loss</a></li>
            </ul>
            <div class="tab-content">
                <div id="sectionA" class="tab-pane fade in active">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-offset-1 col-md-5 clearfix">
                                <img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right animated bounceInLeft">
                            </div>
                            <div class="col-md-5 animated bounceInRight" >
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>

                            </div>
                        </div>
                    </div>
                </div>
                <div id="sectionB" class="tab-pane fade">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-offset-1 col-md-5 clearfix">
                                <img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
                            </div>
                            <div class="col-md-5" >
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>

                            </div>
                        </div>
                    </div>
                </div>
                <div id="sectionC" class="tab-pane fade">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-offset-1 col-md-5 clearfix">
                                <img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
                            </div>
                            <div class="col-md-5" >
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>

                            </div>
                        </div>
                    </div>
                </div>
                <div id="sectionD" class="tab-pane fade">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-offset-1 col-md-5 clearfix">
                                <img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
                            </div>
                            <div class="col-md-5" >
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

现在这个功能非常好，我已经将这个标签功能用于我的很多旧网站，但这次我决定添加一些css-3动画，所以让我们专注于我遇到困难的部分。基本上，每次点击标签时，我都希望<img>和<div class="col-md-5">分别添加类animated bounceInLeft和animated bounceInRight。

现在，我做了什么来实现这一点，基本上每次点击标签时都会触发事件hidden.bs.tab，每次显示标签时，事件都会触发shown.bs.tab。现在我写了下面的代码：

$('#myTab').on('hidden.bs.tab'  , function(){
    // console.log('tab hidden');
    $('.tab-content img').removeClass('animated bounceInLeft');
    $('.tab-content .col-md-5').removeClass('animated bounceInRight');
});

$('#myTab').on('shown.bs.tab' , function(){
    // console.log('tab hidden');
      if ($('.tab-pane').hasClass('active')) {
      $('.tab-content img' ).addClass('animated bounceInLeft');
      $('.tab-content .col-md-5').addClass('animated bounceInRight');          
    }
});

我编写的上述代码存在一个很大的缺陷，我想要实现的是当我点击一个标签时我只希望该特定标签的<img>和<div class="col-md-5">分别添加类animated bounceInLeft和animated bounceInRight。但上面的代码实际上正在做的是从所有元素中删除类并立即重新添加它们。

我认为可能需要使用this关键字，但我不知道如何实现这一点;谁能告诉我我错过了什么？

Answer 1

我不知道Bootstrap是否有动画类？但是，您可以使用this repo来实现所需的首选动画。

添加：

<link rel="stylesheet" href="animate.min.css">

我稍微更新了HTML（将类文本内容添加到每个col-md-5）。

<div id="sectionD" class="tab-pane fade">
    <div class="container">
        <div class="row">
           <div class="col-md-offset-1 col-md-5 clearfix">
              <img src="http://lorempixel.com/400/200/" alt="stretching exercise" class="pull-right">
           </div>
           <div class="col-md-5 text-content">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
           </div>
        </div>
   </div>

而这个jQuery

$(document).ready(function(){ 
    //make first tab active
    $("#myTab li:eq(0) a").tab('show');

    $('#myTab').on('hidden.bs.tab'  , function(){
        $('.text-content').removeClass('animated bounceInRight');
        $('img').removeClass('animated bounceInLeft');
    });

    $('#myTab').on('shown.bs.tab' , function(){
        $('.active').find('.text-content').addClass('animated bounceInRight');
        $('.active').find('img').addClass('animated bounceInLeft');
    });

});

Answer 2

使用一点setTimeout魔法，我找到了解决方案：

$('#myTab').on('click' , 'li a' , function(){

    $this = $(this);
    var str_href = $this.attr('href'); 

      str_image      = str_href + ' ' + 'img';
      str_contentdiv = str_href + ' ' + '.add-animation';


      setTimeout(function(){
          $(str_image).addClass('animated bounceInLeft');
          $(str_contentdiv).addClass('animated bounceInRight'); 

           setTimeout( function(){
              $(str_image).removeClass('animated bounceInLeft');
              $(str_contentdiv).removeClass('animated bounceInRight');
           }, 2000);
      }, 100);  

});

注意：对于我添加动画bounceInRight类的col-md-5，我还将类add-animation添加为钩子，可以使用css选择器，但没关系。

此方法的缺点：如果用户结果是点击狂，则动画将无法显示，因为setTimeout的工作方式为：D

使用Bootstrap事件添加动画

2 个答案: