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

2025-10-29 20:13:03

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

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