jquery实战1-hide与show

必须手敲代码才算实战

<div style="width:100%;height:90%"> //表示撑满整个屏幕
	<div id="div1" style="float:left;width:33%;height:90%;background-color:#0ff" > //用颜色来标记div
	</div>
	<div id="div2" style="float:left;width:33%;height:90%;background-color:#f0f" >
	</div>
	<div id="div3" style="float:left;width:33%;height:90%;background-color:#ff0" >
	</div>
</div>
<button id="button1" type="button" >点击我</button>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"> //必须单独放，否则不识别
</script>
<script>
	$(document).ready(function(){
		$("#button1").click(function(){
			if($("#div2").is(':visible')){ //判断属性
				$("#div2").hide();
			}else{
				$("#div2").show();
			}
			
			
		});
	});
</script>

渐入渐出模式可以直接用toggle

<html>
<head>
<meta charset = "UTF-8" />
</head>
<div style="width:100%;height:90%"> 
    <div id="div1" style="float:left;width:33%;height:90%;background-color:#0ff" > 
    </div>  
    <div id="div2" style="float:left;width:33%;height:90%;background-color:#f0f" >  
    </div>  
    <div id="div3" style="float:left;width:33%;height:90%;background-color:#ff0" >  
    </div>  
</div>  
<button id="button1" type="button" >点击我</button>  
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>  
<script>  
    $(document).ready(function(){  
        $("#button1").click(function(){  
                $("#div2").fadeToggle("slow");              
        });  
    });  
</script>  
<html>
这样就能


posted @ 2017-08-27 17:00  开往春天的拖拉机  阅读(136)  评论(0)    收藏  举报