js点击显示隐藏层代码

最新推荐文章于 2024-05-01 00:02:34 发布
最新推荐文章于 2024-05-01 00:02:34 发布
阅读量5.2k 收藏
点赞数
文章标签： javascript div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linwins/article/details/6530205
版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js显示隐藏层</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function toggle(targetid,objN){
  
      var target=document.getElementById(targetid);
   var aa=document.getElementById(objN)

            if (target.style.display=="block"){
                target.style.display="none";
    aa.innerText="显示";
   

            } else {
                target.style.display="block";
    aa.innerText='隐藏';
            }
  
}
-->
</script>
<style type="text/css">
<!--
#div1{
background-color:#CCCCCC;
height:100px;
width:700px;
display:none;
}

-->
</style>
</head>

<body>
<a href="#" id="aa" onClick="toggle('div1','aa')">显示</a>
<div id="div1"><a href="http://www.baidu.com/ ">欢迎来带实用PHP</div>
</body>
</html>

linwins
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS控制显示隐藏层
weixin_34216107的博客
01-11 1390
注意：不能用document.getElementsByName；会出现对象未被引用。&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;&lt;title&gt;无标题文档&lt;/title&gt;&lt;script langua
js点击实现显示和隐藏效果
热门推荐
luckybuling
07-12 3万+
1、html结构 &lt;img src="images/xingxing.jpg" alt="" id="img"&gt; &lt;button id="btn_show" &gt; 显示 &lt;/button&gt; &lt;button id="btn_hidden"&gt; 隐藏 &lt;/button
JS实现点击显示与隐藏
qq_16908489的博客
02-23 1925
点击显示/隐藏 #thediv { width:200px; height:100px; line-height:100px; text-align:center; background-color:green; } function S_h(obj){ if(obj.style.display=='block'){ obj.style.display='none';
Js写的点击显示隐藏的div的代码
qq1773500200的博客
10-07 573
原图片只有一个按钮，点击后产生如下结果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>hello world</title
JavaScript点击一个按钮隐藏和显示div
Return_KB的博客
01-09 3万+
本章节通过代码实例介绍一下如何实现点击同一按钮实现一个元素的显示和隐藏效果。 此效果还是比较实用的，比如点击按钮可以实现一个功能模块的显示或者隐藏。 下面就通过代码实例介绍一下如何实现此功能。 代码实例如下: 01020304050607080910111213141516171819202122232425262728293031323334html>head>meta ch
Jquery 点击按钮显示和隐藏层的代码
10-28
不好意思，刚刚发了一个类似的效果，发现代码比较多，而却还有一个bug，现在修正了错误，需要的朋友可以参考下。
js中点击空白区域时文本框与隐藏层的显示与影藏问题
01-19
当用户点击除了文本框和浮动层以外的网页空白处时，要隐藏浮动层。 当用户点击浮动层时，改变文本框的值。 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
javascript显示隐藏层比较不错的方法分析
12-10
这是一个Q&A的页面，设计师希望能够点击相关的问题后，在它下方显示对应的答案。这是一个比较常见功能，通常的解决办法是把“答案”当作整个问题容器的子元素，然后点击父元素上的按钮后展开对应的子元素。通过父子...
js点击出现场层层外点击层消失的代码
01-19
点击一个连接显示层~点击其他区域隐藏 练习 by 软件开发网 #myDiv{ border:1px solid #000000; width:200px; height:100px; background:#cccccc; } 软件开发网 [Ctrl+A 全选 注:如需引入外部Js需刷新...
JavaScript 在网页上单击鼠标的地方显示层及关闭层
12-09
主要是控制层的显示、隐藏。 代码如下: <HTML> <HEAD> <META http-equiv=”Content-Type” content=”text/html; charset=gb2312″> <TITLE>层的隐藏显示练习</TITLE> <STYLE type...
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 658
步骤很详细，直接上教程……
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 769
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
飞云先生
04-30 41
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
前端Vue2项目搭建过程
xuemen11的博客
04-25 1220
vue2,vuex,vant组件库
[email protected]使用懒加载
weixin_44072254的博客
04-25 214
【代码】[email protected]使用懒加载。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 196
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
CSR、SSR与同构渲染全方位解析
Allen-
04-26 1468
现代Web应用的核心渲染方式——客户端渲染（CSR）、服务器端渲染（SSR）以及同构渲染。接下来我们将通过对比它们的原理、应用场景、优缺点及实际案例，深入了解如何根据项目需求选择合适的渲染策略。
小区服务|基于SprinBoot+vue的小区服务管理系统(源码+数据库+文档)
最新发布
weixin_66413741的博客
05-01 458
这次开发的小区服务管理系统对安保管理、安保分配管理、客服聊天管理、字典管理、房屋管理、反馈管理、论坛管理、公告管理、反馈处理管理、住户管理、员工管理、管理员管理等进行集中化处理。经过前面自己查阅的网络知识，加上自己在学校课堂上学习的知识，决定开发系统选择B/S模式这种高效率的模式完成系统功能开发。这种模式让操作员基于浏览器的方式进行网站访问，采用的主流的Java语言这种面向对象的语言进行小区服务管理系统程序的开发，在数据库的选择上面，选择功能强大的Mysql数据库进行数据的存放操作。
redux快速入门
qq_73270720的博客
04-29 264
简单的加减案例,学会redux快速入门
有没有点击按钮显示遮罩层的完整代码
06-08
当然可以，以下是一个简单的HTML和CSS代码，以及触发遮罩层显示的JavaScript代码： HTML代码： ```html <button class="button">点击显示遮罩层</button> <div class="overlay"> <div class="overlay-content"> <p>这里是遮罩层中的文字内容</p> </div> </div> ``` CSS代码： ```css .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; display: none; } .overlay-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 10px; text-align: center; } ``` JavaScript代码： ```javascript var overlay = document.querySelector(".overlay"); var button = document.querySelector(".button"); var text = document.querySelector(".overlay-content p"); button.addEventListener("click", function() { overlay.style.display = "block"; }); overlay.addEventListener("click", function() { overlay.style.display = "none"; }); ``` 以上代码中，当点击按钮时，JavaScript代码会将遮罩层的display属性设置为block，从而显示遮罩层。当点击遮罩层时，JavaScript代码会将遮罩层的display属性设置为none，从而隐藏遮罩层。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值