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隐藏
  • dnf70级力驱刷图加点攻略
  • DNF混沌魔灵改版后好玩吗?
  • css如何改变select默认的背景色
  • 自适应图片轮播功能制作-Bootstrap
  • 小程序wxss如何动态
  • 热门搜索
    获奖手抄报 2020国庆节手抄报 尊师重教手抄报 法律手抄报图片 三国演义手抄报图片 低碳生活手抄报内容 读书名言手抄报 健康小常识手抄报内容 数学故事手抄报 一二年级普通话手抄报