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>这样就能