jquery实战1-hide与show

来源：互联网发布：linux更新软件源编辑：程序博客网时间：2024/05/22 02:18

必须手敲代码才算实战

<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>

这样就能

阅读全文

0 0