JS实现点击按钮关闭某个盒子

最新推荐文章于 2021-06-24 17:36:34 发布
最新推荐文章于 2021-06-24 17:36:34 发布
阅读量4.9k 收藏 7
点赞数 3
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/c9316/article/details/81390891
本文通过一个具体的实例展示了如何使用HTML和CSS实现顶部横幅的布局，并通过简单的JavaScript交互实现横幅的显示与隐藏功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>just a practice</title>
	<style type="text/css" media="screen">
		*{
			padding: 0;
			margin:0;
		}
		.top-banner{
			background-color: pink;
            height: 80px;
		}	
		.w{
			width: 1210px;
			height: 80px;
			margin:0 auto;
			background-color: blue;
			position:relative;
		}	
		a{
			display: inline-block;
			width: 20px;
			height: 20px;
			font:700 14px/20px "simsum";
			text-align: center;
			text-decoration: none;
			color:#fff;
			background-color: #000;
			position: absolute;
			top:10px;
			right:10px;
		}
		.hide{
			display: none!important;
		}
	</style>
</head>
<body>

	<div class="top-banner">
		<div class="w" id="topBanner">
			<img src="" alt="">
			<a href="#" id="close">×</a>
		</div>
	</div>
<script>
	//点击a链接 关闭top-banner盒子
	var close=document.getElementById("close");
	var topbanner=document.getElementById("topbanner");
	close.onclick=function fff(){
		topBanner.className="hide";

	}
</script>
</body>
</html>

效果就是：

点击×后：

 

 

 

牟童
关注
vue使用three.js实现盒子上下左右开关门的效果（进一步优化）
菜鸟karroy
06-13 2807
一、vue使用three.js实现开关门 1、实现效果 使用button按钮来控制开关门。 默认是关门状态，当点击“向左/向右/向上/向下开门”按钮时实现某个方向的开门效果，并且不需要点击“关门按钮”就能切换不同方向的开门效果；点击“关门按钮”实现关门的效果。 2、实现思路 2.1、建立一个盒子模型。 （1）定义一个Scene、PerspectiveCamera、WebGLRenderer以及包...
JavaScript实现网页轮播图
lrelia1的博客
11-22 3410
基础简单js实现轮播图功能效果
JS+CSS实现带关闭按钮的DIV弹出窗口
12-09
JS+CSS实现带关闭按钮的DIV弹出窗口
JS点击关闭按钮或盒子外，关闭盒子
tuzi007a的博客
06-24 1607
大家好，我是梅巴哥er。本篇介绍 JS点击关闭按钮或盒子外，关闭盒子 的其中一种方法，以及对方法进行封装。 先看图： 上代码 <!-- demo.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name
js实现简单的点击按钮盒子消失效果
日常分享
07-06 3380
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; #box1{ width:
js简单的弹出框有关闭按钮
weixin_34357887的博客
07-01 797
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta h
js 点击按钮关闭当前页面的
iteye_19776的博客
08-12 1280
开发时遇到点击按钮关闭当前页面的问题，虽然解决了但还是有点问题，谁能帮助解答一下 （1）我的需求是点击按钮以后，数据发到后台存储，然后关闭当前页面，所以我只能在ajax成功回调的函数里执行关闭操作[code="javascripe"] $.ajax({ url: '/customer_management/customers/destroy', ...
JavaScript实现点击事件显示浮动DIV技巧
3. 使用JavaScript实现交互逻辑：当按钮被点击时，通过JavaScript改变浮动div的CSS样式，让它显示出来。 ```javascript document.getElementById('showButton').onclick = function() { // 获取div元素 var ...
在Vue组件中获取全局的点击事件方法
10-18
在Vue.js开发中，有时我们需要实现全局点击事件的监听，特别是在组件化开发中，以便能够对整个应用的某个特定行为做出响应。例如，一个常见的需求是点击组件外部时关闭某个弹出或者下拉菜单。本篇文章将介绍在Vue...
Prototype实现Lightbox图片盒子插件使用与教程
综合以上知识点，开发者或用户在使用该基于prototype实现的Lightbox图片盒子插件时，应具备一定的JavaScript和Prototype框架的基础知识，能够理解插件的工作原理和使用方法，并根据自己的需求进行适当的配置和优化。
关于点击任意处关闭某个控件的javascript的疑惑
sophia_230的专栏
01-04 291
最近在做项目时，发现一个奇怪的问题，就是如果某个页面有两个控件，比如日期控件和人员选择树控件，这两个控件都采用javascript中点击任意处关闭的事件，结果发现当两个控件都打开后，先关闭其中一个，后一个点击任意处将不能关闭。  关闭树的代码如下：     //任意点击时，调用一个方法document.onclick=doc_onclicks;function doc_oncli...
用JavaScript实现拖拽盒子
yangaoyuan1999的博客
12-08 856
实现效果： 1.单击关闭，关闭盒子 2.点击左上方‘点击注册’，打开盒子 3.鼠标放在盒子上方蓝色区域显示十字 4.点击鼠标不松开就可移动盒子 5.松开鼠标图片暂停 实现步骤： 1.在页面最上方设置一个盒子，里面有一个超链接， 超链接里面设置href="javascript:void(0);"，再点击时不打开网页。 2.再设置一...
原声js控制浏览器全屏或者退出全屏
qq_41114603的博客
09-29 1381
开启全屏 if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } //FireFox else if (document.documentElement.mozRequestFullScreen) { document.docum...
javascript点击除div盒子本身之外的任意地方时，关闭div盒子弹框
美奇软件开发工作室
10-15 2636
html+js代码： <div id="container"> <button id="btn">点击打开弹框</button> <div id="box">我是弹框</div> </div> <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <script type="te...
javascript (js)通过button按钮实现盒子的显示和隐藏
热门推荐
Smile林的博客
03-21 1万+
前奏：无论是实现div或其他内容的显示和隐藏，原理都差不多 效果图： 点击隐藏后隐藏盒子，同时隐藏按钮的值修改为显示。点击显示后盒子又将显示，显示按钮的值修改为隐藏，如图： 完整代码如下（代码详解）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="U...
用js写一个按钮，按下使盒子消失
gghhm的博客
05-22 2286
用js写一个按钮，按下使盒子消失 先来个简单的，用js来实现一个盒子的消失，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #b...
点击盒子外任意位置关闭当前盒子
Honey_tianming的博客
03-24 724
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 500px; height: 500px; backgro...
javascript制作页面广告出现、关闭效果
weixin_44830974的博客
05-09 919
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } #ad{...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值