我有三个不同的按钮,每个按钮都可以切换到相应的div。现在有两个需求:
- 当相应的
.app-div
显示时,在.app-icon
按钮上添加类,以便在活动状态下添加背景颜色。 - 在打开和关闭同一个
.app-div
时添加 animate.css 效果,使得当 div 消失时它能够向下滑动而不是突然消失。
HTML:
<a href="#" class="app-icon"><i class="fa fa-calculator" aria-hidden="true"></i></a>
<a href="#" class="app-icon"><i class="fa fa-sun-o" aria-hidden="true"></i></a>
<a href="#" class="app-icon"><i class="fa fa-rss" aria-hidden="true"></i></a>
<div class="app-div">
content div 1
</div>
<div class="app-div">
content div 2
</div>
<div class="app-div">
content div 3
</div>
jQuery:
$('.app-icon').click(function() {
var index = $(this).index();
$('.app-div').eq(index).toggle().siblings('.app-div').hide();
});
//animate.css effect
$('.app-div').addClass('animated fadeInUp');
这是我目前的内容:https://jsfiddle.net/frshjb373/a5osx7y6/3/