单击按钮隐藏并显示div
尼古拉斯·查沃兹（Nicolas Charvoz）
我正在从头开始重建网站，我想知道如何才能做到这一点：
当我单击两个按钮之一时，将出现另一个视图。我该如何实现？
我尝试了这个：http : //jsfiddle.net/7bqjm1dy/
$("#b1").click(function() {
$("#first").slideDown();
$("#sec").slideUp();
});
$("#b2").click(function() {
$("#sec").slideDown();
$("#first").slideUp();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div style="vertical-align:top; display:inline;">
<button id="b1">Click 1</button><br />
<button id="b2" >Click 2</button>
</div>
<div>
<div id="first" style="display:none; background-color:red; width:100px; height:200px;"></div>
<div id="sec" style="display:none; background-color:blue; width:100px; height:200px;"></div>
</div>但这并不符合我的要求。我想要一个slideFromLeft，我想对齐按钮和地图。
经验
我更新了您的小提琴：
的HTML
<div style="vertical-align:top; display:inline;" class="buttons">
<button id="b1">Click 1</button><br />
<button id="b2" >Click 2</button>
</div>
<div class="boxes">
<div id="first" style="background-color:red; width:100px; height:200px;"></div>
<div id="sec" style="display: none; background-color:blue; width:0px; height:200px;"></div>
</div>
Java脚本
$("#b1").click(function() {
$("#sec").animate({'width': 0}, 'fast', function(){
$(this).hide();
$("#first").show().animate({'width': '100px'});
});
});
$("#b2").click(function() {
$("#first").animate({'width': 0}, 'fast', function(){
$(this).hide();
$("#sec").show().animate({'width': '100px'});
});
});
的CSS
.boxes, .buttons{
float: left;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
单击按钮隐藏并显示div
- 2
通过单击按钮显示和隐藏div
- 3
通过单击按钮显示和隐藏div
- 4
单击按钮时显示/隐藏 div 元素
- 5
显示/隐藏Div-并在单击时隐藏“更多”按钮
- 6
使用按钮单击JavaScript与子div显示/隐藏div
- 7
AngularJS：显示其他div并单击按钮隐藏当前div
- 8
Angular 8隐藏div并在单击按钮时显示div
- 9
使用按钮单击JavaScript与子div显示/隐藏div
- 10
使用Jquery在按钮单击上隐藏/显示Div
- 11
在按钮单击jquery上隐藏/显示div
- 12
单击单选按钮以滑动并显示隐藏的div并传递值
- 13
如何通过单击单选按钮使用dojo显示/隐藏DIV？
- 14
如何根据单选按钮单击显示和隐藏div？
- 15
单击同一按钮时如何显示或隐藏div？
- 16
单击单选按钮以滑动并显示隐藏的div并传递值
- 17
单击按钮上的jQuery显示并隐藏最接近的div
- 18
如何通过单击单选按钮使用dojo显示/隐藏DIV？
- 19
jQuery / css，基于单选按钮单击显示和隐藏div
- 20
如何根据按钮的值在单击事件上显示/隐藏 Div
- 21
单击按钮时显示/隐藏 Div：未按预期工作？
- 22
在单击时显示“ Div 1”并隐藏“ Div 2”，在单击单独的按钮时，显示“ Div 2”并隐藏“ Div 1”？
- 23
显示/隐藏div按钮
- 24
单击按钮隐藏并显示图像
- 25
单击按钮时隐藏并显示
- 26
单击按钮显示div，然后在其外部单击时隐藏该div
- 27
单击显示和隐藏div
- 28
显示单击显示按钮时隐藏表格
- 29
按钮单击显示书房div隐藏上一个div像滑块
我来说两句