手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

Jquery-点击隐藏事件-鼠标点击1时2隐藏

时间:2024-10-14 15:33:06

1、首先我们要考虑下,跳出的广告框只有一个关闭按钮,而没有打开按钮,党点击关闭按钮后,关闭按钮栏和广告栏一起消失,所以我们预设这是一个包含的关系。<div>我是广告我是广告我是广告我是广告我是广告我是广告我是广告我是广告 <h1>X</h1></div>

Jquery-点击隐藏事件-鼠标点击1时2隐藏

2、可以先将jquery文件调入,然后建立style标签,进行div的修饰,并添加相对定位<style>div{width:200px;height:200px;background-color:#FF00DD;margin:50px auto;position:relative;}</style>

Jquery-点击隐藏事件-鼠标点击1时2隐藏

3、然后对h1进行修饰,添加绝对定位,如图<style>div{width:200px;height:200px;background-color:#FF00DD;margin:50px auto;padding:20px;color:white;position:relative;}h1{position:absolute;top:5px;right:5px;margin:0;background-color:blue;}</style>

Jquery-点击隐藏事件-鼠标点击1时2隐藏
Jquery-点击隐藏事件-鼠标点击1时2隐藏

4、然后开始进行事件编写,当鼠标点击h1时,div消失,所以需要点击的是h1,$("h1").click(function(){ })

Jquery-点击隐藏事件-鼠标点击1时2隐藏

5、点击h1后,发生的变化就是div整个消失,所以输入:$("h1").click(function(){ $("div").hide() })

Jquery-点击隐藏事件-鼠标点击1时2隐藏

6、然后保存文件,在浏览器中预览查看效果,当点击h1时,看div是否消失。

Jquery-点击隐藏事件-鼠标点击1时2隐藏
Jquery-点击隐藏事件-鼠标点击1时2隐藏
© 手抄报圈