我有三个不同的按钮,有三个不同的div,每个按钮在同一个地方切换一个适用的div。试着做两件事。
document.getElementsById("button1").style.width
时,在.app-icon
按钮上添加课程,以便我可以在激活时添加背景颜色。.app-div
打开和关闭时添加animate.css效果,这样当div消失时它会向下滑动,而不是突然消失。HTML:
.app-div
jQuery的:
<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>
到目前为止我所拥有的内容:https://jsfiddle.net/frshjb373/a5osx7y6/3/
答案 0 :(得分:2)
一个选项是处理if
语句,检查点击的图标是否实际上是活动的,如下所示:
$('.app-icon').click(function() {
var index = $(this).index();
if($(this).hasClass('active')) {
$(this).removeClass('active');
$('.app-div').eq(index).addClass('fadeOutDown')
} else {
$('.app-icon').removeClass('active');
$(this).addClass('active')
$('.app-div').hide().eq(index).show().removeClass('fadeOutDown')
}
});
答案 1 :(得分:2)
不确定这是否是您正在寻找的内容(很难做到#34;没有故障&#34;仅使用animate.css进行切换)
$('.app-icon').click(function() {
$('.app-icon.active').not(this).removeClass('active');
var index = $(this).toggleClass('active').index();
$('.app-div').eq(index).toggleClass('fadeInUp fadeOutDown').show().siblings('.app-div').removeClass('fadeInUp').addClass('fadeOutDown').hide();
});
并为.active
类
.app-icon.active{ color:green; }
答案 2 :(得分:1)
试试这个:
$('.app-icon').click(function() {
var index = $(this).index();
if($('.app-div').eq(index).is(":visible"))
{
$('.app-div').eq(index).addClass('fadeOutDown').slideUp();
}
else
{
$('.app-div').eq(index).removeClass('fadeOutDown').slideDown().siblings('.app-div').slideUp();
}
$('.app-icon.current').removeClass("current");
$(this).addClass("current");
});
编辑: 要通过单击自身来删除当前类,您应该在else语句中移动addClass(“current”)。 这是一个有效的演示https://jsfiddle.net/a5osx7y6/5/
答案 3 :(得分:0)
这是Artur回复的完美结束
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 style="position: relative">
<div class="app-div">
content div 1
</div>
<div class="app-div">
content div 2
</div>
<div class="app-div">
content div 3
</div>
</div>
CSS
.app-div {display: none; position: absolute; top: 0; left: 0;}
.app-icon .fa {transition: background-color 0.5s ease;}
.app-icon .fa:hover {background: #ccc;}
.app-icon.active {background: #CD87BA;}
的JavaScript
$('.app-icon').click(function() {
$('.app-icon.active').not(this).removeClass('active');
var index = $(this).toggleClass('active').index();
$('.app-div').eq(index).toggleClass('fadeInUp fadeOutDown').show().siblings('.app-div').removeClass('fadeInUp').addClass('fadeOutDown');
});
//animate.css effect
$('.app-div').addClass('animated fadeOutDown');