如何关闭多个彼此独立的div。 javascript

2024-01-06

我构建了一排 4 个按钮来打开 4 个 div,一次打开一个。用户可以通过单击这些按钮在 4 个 div 之间切换。但是,用户必须能够再次关闭该 div,并且彼此独立。这意味着如果用户单击这些按钮之一,他必须能够仅使用一个“关闭按钮”再次关闭它。此按钮应包含在第 4 行中。 所以会有 4 个按钮来打开和在 div 之间切换,就像画廊一样 一个按钮即可关闭显示的任何 div。

如果有人可以帮助我,我会非常非常高兴,拜托!

window.show = function(elementId) { 
    var elements = document.getElementsByTagName("div");
    for (var i = 0; i < elements.length; i++)
        elements[i].className = "hidden";
    
    document.getElementById(elementId).className = "";
}
.hidden {
    display: none;
}
.designbutton {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	color: #266786;
	background:none;
	background-image: none;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	border-color:#266786;
	border-bottom:hidden;
	border-right:hidden;
}
#id1 {
	position:absolute;
	top:100px;
	left:30px;
	background-color:#33CC99;
	padding-left:90px;
	padding-right:90px;
	padding-top:30px;
	height:660px;
	width: 724px;
	color: #266786;
	line-height:1.65;
	text-align:center;
}
#id2 {
	height:auto;
	width:600px;
	text-align:center;
	font-size:14px;
	font-family: Arial, Helvetica, sans-serif;
	color: ##444444;
	position:absolute;
	left:30px;
	line-height:1.65;
	margin-top:50px;
}
#id3 {
	height:auto;
	width:600px;
	text-align:center;
	font-size:14px;
	font-family: Arial, Helvetica, sans-serif;
	color: ##444444;
	position:absolute;
	left:30px;
	line-height:1.65;
	margin-top:50px;
}
#id4 {
	height:auto;
	width:600px;
	text-align:center;
	font-size:14px;
	font-family: Arial, Helvetica, sans-serif;
	color: ##444444;
	position:absolute;
	left:30px;
	line-height:1.65;
	margin-top:50px;
}
<button class="designbutton" type="button" onclick="show('id1');">Economic Center</button>
<button class="designbutton" type="button" onclick="show('id2');">Logistic Center</button>
<button class="designbutton" type="button" onclick="show('id3');">Industrial Center</button>
<button class="designbutton" type="button" onclick="show('id4');">Financial Center</button>



<div id="id1" class="hidden">
<p><b>El idem sae.</b></p>
<p>Id et fugit officto dolupta spicide il ipsant arum et oditaquia se cullore nistiistin nonsequae qui corem quibust, quisciisti culluptatur sedi testrum sectur?
Odipsunto venist occus issitae storepro iumqui volorat ionsedis nonem audi vellit faceaquiae. Nam dolupti re eos iumquiaecus, ullorib eritatq uaernatur, nonsequi impelest 
fugitamet quias vella sit ducidus dolupta estior molore, quas rem adisquam, quia volecae natiis arcitium etur sim inum eost pore voluptat quamusae nonsequi rerum sedit, quae. 
Sedicimaios et fuga. Accabo. Empore num aut istio. Minum que inveliaest, ut accus recatiisvendam, sitio. Ent ut ut ratemperum erfernatio ommolo occuptatur rest perereptae 
nempore odioriberro qui dellatq uiaspelit opta cum acest, etur? Num enihil moloritatur, tem corenias rehendit rero est aut et verum re nossum voluptaquae dis eaquae. Re ea 
consequ idisquasim vendebi tiisquatur solupta ssequaspero idunt perempor sam qui ulligent. Ecepe landi tet harchic iliquun tibus. Ebit ut ulluta ad et ut que expereictis 
arion eicabor epernatur? Optiaep erfero con re vendam rerume nullaccum rerspic to blaboria que vendandant.</p></div>

<div id="id2" class="hidden">
<b>Ommolo occuptatur.</b><br><br>
Ent ut ut ratemperum erfernatio ommolo occuptatur rest perereptae 
nempore odioriberro qui dellatq uiaspelit opta cum acest, etur? Num enihil moloritatur, tem corenias rehendit rero est aut et verum re nossum voluptaquae dis eaquae. Re ea 
consequ idisquasim vendebi tiisquatur solupta ssequaspero idunt perempor sam qui ulligent. Ecepe landi tet harchic iliquun tibus. Ebit ut ulluta ad et ut que expereictis 
arion eicabor epernatur? Optiaep erfero con re vendam rerume nullaccum rerspic to blaboria que vendandant.</div>

<div id="id3" class="hidden">
<b>Idunt perempor.</b><br><br>
Nam dolupti re eos iumquiaecus, ullorib eritatq uaernatur, nonsequi impelest 
fugitamet quias vella sit ducidus dolupta estior molore, quas rem adisquam, quia volecae natiis arcitium etur sim inum eost pore voluptat quamusae nonsequi rerum sedit, quae. 
Sedicimaios et fuga. Accabo. Empore num aut istio. Minum que inveliaest, ut accus recatiisvendam, sitio. Ent ut ut ratemperum erfernatio ommolo occuptatur rest perereptae 
nempore odioriberro qui dellatq uiaspelit opta cum acest, etur? Num enihil moloritatur, tem corenias rehendit rero est aut et verum re nossum voluptaquae dis eaquae. Re ea 
consequ idisquasim vendebi tiisquatur solupta ssequaspero idunt perempor sam qui ulligent. Ecepe landi tet harchic iliquun tibus. Ebit ut ulluta ad et ut que expereictis 
arion eicabor epernatur? Optiaep erfero con re vendam rerume nullaccum rerspic to blaboria que vendandant.
</div>

<div id="id4" class="hidden">
<b>Optiaep erfero</b><br><br>
Id et fugit officto dolupta spicide il ipsant arum et oditaquia se cullore nistiistin nonsequae qui corem quibust, quisciisti culluptatur sedi testrum sectur?
Odipsunto venist occus issitae storepro iumqui volorat ionsedis nonem audi vellit faceaquiae. Nam dolupti re eos iumquiaecus, ullorib eritatq uaernatur, nonsequi impelest 
fugitamet quias vella sit ducidus dolupta estior molore, quas rem adisquam, quia volecae natiis arcitium etur sim inum eost pore voluptat quamusae nonsequi rerum sedit, quae. 
Sedicimaios et fuga. Accabo. Empore num aut istio. Minum que inveliaest, ut accus recatiisvendam, sitio. Ent ut ut ratemperum erfernatio ommolo occuptatur rest perereptae 
nempore odioriberro qui dellatq uiaspelit opta cum acest, etur? Num enihil moloritatur, tem corenias rehendit rero est aut et verum re nossum voluptaquae dis eaquae. Re ea 
consequ idisquasim vendebi tiisquatur solupta ssequaspero idunt perempor sam qui ulligent. Ecepe landi tet harchic iliquun tibus. Ebit ut ulluta ad et ut que expereictis 
arion eicabor epernatur? Optiaep erfero con re vendam rerume nullaccum rerspic to blaboria que vendandant.
</div>

使用jquery,给出所有divs一个普通的类,比如divs

然后单击按钮,使用以下内容

$(".divs").hide();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何关闭多个彼此独立的div。 javascript 的相关文章

  • 从未用 @flow 标记的导入文件中获取类型定义

    TL DR我怎么告诉flow从未声明的导入模块导入类型定义 flow 加长版 流接缝能够从不使用流语法的文件中派生类型 请参阅示例 示例文件 flow js if Math random lt 0 5 var y hello else va
  • 为什么是 javascript:history.go(-1);无法在移动设备上工作?

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结
  • 标签获取 href 值

    我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
  • 保持未知数量的 div 居中,每行最多 4 个

    我有一个简单的问题 但我自己无法解决 简而言之 有一个未知电话我必须在页面中放置的元素数量 最多 每行 4 个元素 但仍居中 此图片给您一个提示 我为了示例而设置它 详细 在上图中我涵盖了不同的场景 例如 如果总共有 5 个元素 则应使用第
  • 提交后禁用按钮

    当用户提交付款表单并且发布表单的代码导致 Firefox 中出现重复发布时 我试图禁用按钮 去掉代码就不会出现这个问题 在firefox以外的任何浏览器中也不会出现这个问题 知道如何防止双重帖子吗 System Text StringBui
  • HTML 中部分着色的阿拉伯语单词

    我不会说阿拉伯语 但我需要我们网站上对阿拉伯语的具体支持 我需要将部分阿拉伯语单词放在 span 与单词其他部分的风格不同 当我输入两个字符时 and 它们被组合成word 但是当我使用 HTML 标记时 span span 这些字母在输出
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • 动态img(或视频)标签根本不加载资源,HTTP请求处于“待处理”状态

    我尝试使用以下方法在 Web 应用程序上加载资源时遇到一些问题img or videoHTML 标签 我在我的应用程序中使用 Angular 并动态设置src的参数img标签 使用ng src src 指示 没有那么多图像和资源需要加载 在
  • Firefox 书签探索未超过 Javascript 的第一级

    我已经编写了一些代码来探索我的 Firefox 书签 但我只获得了第一级书签 即我没有获得文件夹中的链接 e g 搜索引擎 雅虎网站 谷歌网站 在此示例中 我只能访问 Search engines 和 google com 不能访问 yah
  • 现在 CSS3 供应商前缀有多必要? [复制]

    这个问题在这里已经有答案了 我只是想知道现在在 CSS 中指定 webkit moz ms 或 o 等供应商前缀在多大程度上仍然有必要 如果我理解正确的话 opera 切换到了 webkit 所以会删除 o 对吗 IE 在 IE10 中不再
  • Angular 2+ 安全性;保护服务器上的延迟加载模块

    我有一个 Angular 2 应用程序 用户可以在其中输入个人数据 该数据在应用程序的另一部分进行分析 该部分仅适用于具有特定权限的人员 问题是我们不想让未经授权的人知道how我们正在分析这些数据 因此 如果他们能够在应用程序中查看模板 那
  • Javascript 数组到 VBScript

    我有一个使用 Javascript 构建的对象数组 我需要使用 VBScript 读取它 如下例所示 我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化 我无法更改页面的默认语言 这
  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive
  • 为什么在 Internet Explorer 中访问 localStorage 对象会引发错误?

    我正在解决一个客户端问题 Modernizr 意外地没有检测到对localStorageInternet Explorer 9 中的对象 我的页面正确使用 HTML 5 文档类型 并且开发人员工具报告该页面具有 IE9 的浏览器模式和 IE
  • 如何在类似控制台的环境中运行 JavaScript?

    我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时
  • 如何获取给定 DOM 元素的所有定义的 CSS 选择器?

    如何使用 jQuery 获取给定 DOM 元素的所有定义的 CSS 选择器 定义后 我的意思是在应用于任何样式表的所有 CSS 选择器document 在某种程度上 这类似于 FireBug 实现的功能 其中显示所选 DOM 元素的所有应用
  • 为什么我不能在 AngularJS 中使用 data-* 作为指令的属性名称?

    On the t他的笨蛋 http plnkr co edit l3KoY3 p preview您可以注意到属性名称模式的奇怪行为data 在指令中 电话 Test of data named attribute br
  • 条件在反应本机生产中失败,但在开发中有效

    我创建了一个反应本机应用程序 我需要通过它进行比较 如果属实 就会执行死刑 问题是 该条件适用于 React Native 开发模式 而不适用于 React Native 生产版本 我使用 firebase 作为数据库 也使用 redux
  • Safari 支持 JavaScript window.onerror 吗?

    我有一个附加到 window onerror 的函数 window onerror function errorMsg url line window alert asdf 这在 firefox chrome 和 IE 中工作正常 但在 s
  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比

随机推荐

  • 导入csv数据(iPhone SDK)

    对于以下代码 我可以读取字符串中的所有数据 并成功获取绘图数据 NSMutableArray contentArray NSMutableArray array NSString filePath 995 995 995 995 995 9
  • 从 python 内部调用 python 脚本

    我花了很长时间才找到这个解决方案 所以我希望其他人能够看到它 我想编写一个 python 脚本来创建一个虚拟环境并在其中安装模块 不幸的是 pip 不能很好地与子进程配合 详细信息如下 https github com pypa pip i
  • 如何使用 HTML AGILITY PACK 调用 Click

    In 网页浏览器 网络表格 我们可以InvokeMember click 当我们解析 HTML 时 我们怎样才能做到这一点HTML 敏捷包 a href 当我们在 Href 中有 javascript 时 如何使用 HTTP REQUEST
  • 绘图完全无边框

    我在 png 图像文件上设置了一个带有透明叠加散点图的漂亮图 我希望我的绘图窗口和 pdf 输出的大小与我的 png 962x745 完全相同 然而 即使在关闭轴 注释和框架之后 R 仍然在图像周围留下边框 这可以通过一个简单的示例来显示
  • SwiperJS - 如何设计分页项目符号的样式?

    在我的 ReactJS 应用程序中使用 SwiperJS 我已导入默认样式包 但无法弄清楚如何设置分页容器或项目符号的样式 In the pagination 参数在 内 每次我改变el param 分页就消失了 每次我改变bulletCl
  • 在 RecyclerView 中回收时,项目视图无法正确测量

    我有一个场景 当视图被回收时 布局不正确 我的行项目布局如下 注意wrap content线性布局宽度 weight and ellipsize
  • GSON - 特定情况下的自定义序列化器

    我有这个架构 public class Student public String name public School school public class School public int id public String name
  • 从提供者读取数据时发生错误。根据验证程序,远程证书无效

    I m trying to connect Postgres Database on AWS EC2 instance to Microsoft PowerBI I tried various method available on int
  • 如何找出访问者的 RAM 和 GPU 信息?

    我想知道我的访问者有多少 RAM 以及有关他们的 GPU 的所有可用信息 有没有办法通过 JavaScript 或者 ActionScript Flash 来实现这一点 Use navigator deviceMemory 查找设备 RAM
  • 如何使 y 轴上的数字显示以百万为单位的值,而不是 matplotlib 中的科学记数法?

    如何更改 y 轴上的数字以显示 0 到 1700 万而不是 0 到 1 75 1e7 import numpy as np import pandas as pd import matplotlib pyplot as plt import
  • 在设备上运行phonegap - 未找到设备

    我正在尝试在我的设备上运行一个在phonegap中制作的应用程序 并通过USB连接 gt phonegap run android phonegap detecting Android SDK environment phonegap us
  • 忽略属性覆盖

    Content of Build xml File
  • 在 IE 上自动打开文件输入

    IE输入的文件可以自动打开吗 如果你这样做 input click IE 不提交表单 也许我能以某种方式获得它的价值 input val 不起作用 这会给你假路径 对此有什么想法吗 克隆也不起作用 另一种可能性是将打开按钮放置在页面上的其他
  • 如何创建卡车/卡车后视镜的形状?

    circle width 40px height 40px border radius 50 background color yellow position absolute z index 20 border 1px solid AAA
  • VSCode HTML 缩进,同一行的结束标记

    在 HTML 文件上使用 VSCode 缩进时 右括号结束于下一行 我该如何解决这个问题 我搜索了 HTML 缩进扩展 但没有成功 总氮 转到 设置 gt 搜索自动换行 editor wordWrap off 愿它对你有帮助
  • MATLAB:比较三个数组中的所有元素

    我有三个一维数组 其中元素是一些值 我想将一个数组中的每个元素与其他两个数组中的所有元素进行比较 例如 a 2 4 6 8 12 b 1 3 5 9 10 c 3 5 8 11 15 我想知道不同数组中是否有相同的值 在本例中有 3 5 8
  • Crashlytics 不适用于 Xcode 10 beta

    我使用 Firestore 和 Google 提供的一些子服务 Crashlytics 就是其中之一 我最近开始使用 Xcode 10 beta 并且开始收到此错误 Users
  • Python 剥离方法

    今天在 python 终端中 我尝试了 a serviceCheck postmaster a strip serviceCheck 但不是得到 postmaster 我有 postmast 什么可能导致这种情况 我怎样才能得到 postm
  • 类型 Any 没有下标成员 json Swift 3

    我有这个代码 let subjectAbbreviation JSON data subject abbr as String Swift 3 抱怨 Any 类型没有下标成员 我该如何解开这个 我知道我可以使用 JSON as AnyObj
  • 如何关闭多个彼此独立的div。 javascript

    我构建了一排 4 个按钮来打开 4 个 div 一次打开一个 用户可以通过单击这些按钮在 4 个 div 之间切换 但是 用户必须能够再次关闭该 div 并且彼此独立 这意味着如果用户单击这些按钮之一 他必须能够仅使用一个 关闭按钮 再次关