JavaScript show() hide() 使用方法

2025-11-18 10:30:19

1、新建一个div、button,定义class,(定义随意)

JavaScript show() hide() 使用方法

2、运行一下,效果如图

JavaScript show() hide() 使用方法

3、然后引入如下

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

不然不会有效果!

JavaScript show() hide() 使用方法

4、引入js的方法:下载地址

点击即可下载,然后复制,粘贴到当前项目的js文件夹

JavaScript show() hide() 使用方法

JavaScript show() hide() 使用方法

5、新建<script></script>标签,写入要实现的效果代码

一般放在<body></body>标签的紧跟的后边(我个人这么写,仅供参考),

如图所示:

JavaScript show() hide() 使用方法

6、最后运行:YC(隐藏)   XS(显示)

JavaScript show() hide() 使用方法

JavaScript show() hide() 使用方法

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>

JavaScript show() hide() 使用方法

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢