我在使用 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
可能需要使用关键字,但我不确定如何实现它;有人可以告诉我我错过了什么吗?
最佳答案
不知道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');
});
});
关于javascript - 使用 Bootstrap 事件添加动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29364970/