1、新建一个div、button,定义class,(定义随意)
2、运行一下,效果如图
3、然后引入如下<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>不然不会有效果!
4、引入js的方法:下载地址点击即可下载,然后复制,粘贴到当前项目的js文件夹
5、新建<script></script>标签,写入要实现的效果代码一般放在<body></body>标签的紧跟的后边(我个人这么写,仅供参考),如图所示:
6、最后运行:YC(隐藏) XS(显示)
7、代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>show() hide() 用法</title> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <style> .photo{ width: 512px; height: 630px; } </style> </head> <body> <div class="photo"> <img src="img/1.jpg" alt="这里有图片" /> </div> <button class="YC">YC</button> <button class="XS">XS</button> </body> <script> //隐藏 $('.YC').click(function(){ $('.photo').hide(); }); //显示 $('.XS').click(function(){ $('.photo').show(); }); </script></html>