显示一个div并在单击时隐藏其余div
要实现显示一个div并在单击时隐藏其余div，可以使用HTML和JavaScript来完成。
首先，我们需要创建一个HTML页面，并在其中添加多个div元素。每个div元素都有一个唯一的id属性，用于在JavaScript中引用和操作。
<!DOCTYPE html>
<html>
<head>
<title>Div显示和隐藏</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<script>
var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', function() {
for (var j = 0; j < divs.length; j++) {
if (divs[j] !== this) {
divs[j].classList.add('hidden');
}
}
});
}
</script>
</body>
</html>在上面的代码中，我们首先定义了一个CSS样式，将隐藏的div元素的display属性设置为none，以实现隐藏效果。
然后，我们使用JavaScript获取所有的div元素，并为每个div元素添加一个点击事件监听器。当某个div被点击时，我们遍历所有的div元素，将除当前点击的div外的其他div元素添加一个名为"hidden"的类，从而隐藏它们。
这样，当用户点击某个div时，该div会显示出来，而其他的div会被隐藏起来。
请注意，以上代码中没有提及任何腾讯云相关产品和链接地址，因为这个功能可以通过纯前端的HTML和JavaScript来实现，与云计算无关。
相关·内容
1回答
我试图让图片显示在红色部分，并留在内容div中，但每当我添加图片时，布局就会中断。我真的很感激在这两件我想要实现的事情上得到一些帮助，并提前感谢你们：2.)当该部分被“关闭”时，隐藏图像。HTML： <div class="bookmark">↑ ten ↔ sio
浏览 17提问于2020-03-14得票数 1
2回答
我使用这段代码作为参考：我试图修改代码以使用div而不是无序列表。我现在遇到的问题是，当我使用勇敢的浏览器打开页面时，div没有隐藏，点击按钮后也不做任何更改。使用Chrome时，页面将为空白，不会显示任何内容。>
<div class="conten
浏览 4提问于2020-03-30得票数 1
回答已采纳
1回答
我需要隐藏div中显示的内容，并在用户单击链接时将其替换为其他内容。所有内容都在div#content中。然后，每个内容选择都在另一个div中。<div id = content> <d
浏览 4提问于2013-02-27得票数 0
我正在开发一个使用PhoneGap / Backbone.js / Thorax和Lumbar.js的应用程序。在发生这些操作之一之后，我希望在会话的其余部分隐藏</
浏览 0提问于2014-08-11得票数 0
回答已采纳
我想让列表像www.youtube.com一样“添加到”。我怎么能做到这一点。这在asp.net中是可能的。
我附加了我想在asp.net中使用的快照。
浏览 5提问于2011-06-16得票数 0
我有一个当单击html按钮时运行的JavaScript函数。如果函数中发生错误，则显示一个错误，它只是我动态添加文本的html div，通常会隐藏到错误发生为止。同时，我想在错误显示(div之前)之前动态添加一个换行符(br)。
我的问题是，如果用户一直单击该按钮，并且不断发生错误，则页面将被换行，其余的页面将向下移动。所以休息是复杂的，永远不会消失。下面是JavaScript，它动态地将错误文本添
浏览 1提问于2017-03-22得票数 0
回答已采纳
我在左边栏有链接，在右边栏有相应的内容，排列在适当的div中。<div id="sidebar2">
<div id="companyimage"><img src="siteimages/imagetest.jpg"></div</em
浏览 6提问于2013-07-01得票数 0
1回答
我有一个jquery手风琴内容。示例：<div class="hide">Hide Contents</div>当我的答案接近时，我想隐藏</
浏览 3提问于2012-08-20得票数 0
1回答
我想实现侧边栏，显示类似于手风琴的多个项目。但是，我希望它只显示选定的子菜单。例如，如果我有三个子菜单，比如人物，宠物，物品，如果我点击人物，它将只显示人物和按钮，以便按层次返回。它不会显示宠物或物品。甚至连他们的头都没有。有这样的组件吗？
浏览 15提问于2017-01-14得票数 0
我有一个div与7个孩子，在悬停一个项目改变背景和文字垫从中心。我已经用CSS做过了。现在，我希望当用户单击一个项目时，它会显示另一个带有.wrapper的div ( JavaScript )。如果用户再次单击，它将隐藏特定的div。如何使用JavaScript实现这一逻辑？">Tableware</div>
<
浏览 0提问于2019-01-18得票数 0
回答已采纳
4回答
当点击不同的按钮时，我尝试制作几个div并在它们之间切换。
每个div将持有不同的内容，例如主div在加载时是可见的，其余的是隐藏的，取决于您单击打开该div的按钮，同时隐藏当前div。基本上没有延迟地在div之间切换等等。下面是我要做的，我有2个div，主div在get go中是可见的，而另一个是隐藏
浏览 4提问于2015-01-17得票数 0
回答已采纳
我有一个隐藏的div元素，当我单击链接时，可见性会发生变化。在Selenium脚本中，我单击该链接，看到div打开，但随后它立即关闭。其余的脚本运行，但在一个演示中，我想保持该div打开。我的步骤是：
asser
浏览 2提问于2016-08-29得票数 0
3回答
好吧，我有一个，我想隐藏这个div，当用户点击一个区域时，这个区域不像facebook中的“通知”行为。谢谢。
浏览 16提问于2010-04-26得票数 0
方法1：使用CSS display:none意味着将内容发送到客户端，但隐藏在视图中。换句话说，内容确实存在，但没有占据任何空间。<meta charset="utf-8" /> </head> <div>> </div>
浏览 0提问于2017-05-26得票数 2
我试图通过隐藏/显示在一个div.But上将3个组件放在一个页面中，而我并没有真正了解如何做it.This是第一个div。>最后，如果我单击第一个div中的餐馆按钮和第二个div的任意一个按钮，除了后退按钮
浏览 0提问于2019-05-19得票数 3
回答已采纳
我已经创建了两个三个div，我希望当我单击选项卡时，两个div的其余部分应该是隐藏的，第三个应该是shown.And，我正在尝试这样做，但是直到现在我还没有取得任何成功。第一分区 <div style="text-align:center;padding:10px;"&
浏览 2提问于2016-04-26得票数 0
回答已采纳
示例：从电子表格中同时获取链接<H4> (<a><H4>maximum 200 characters</H4></a>)及其相应的div (<div>maximum 10000 characters</div>)的列表；当单击( toggle() )任何一个可见的链接<H4>时，会显示它们相应的先前隐藏的div
浏览 2提问于2011-12-19得票数 0
2回答
把这个当成一个工作滑行， width: 0px; /* remove scrollbar space */translateY(-50px); }<divid="note"></div>
我需要添加一个
浏览 0提问于2019-04-24得票数 1
回答已采纳
2回答
然而，我有一个疑问。 $("#menu-toggle").click(function(e) { $(&quo
浏览 3提问于2014-03-26得票数 0
回答已采纳
2回答
表格投寄数据
、、、、
我有一个3页的注册页面。在用户在第一个页面上选择一个选项并单击submit之后，表单使用jquery的动画方法将转换为下一个表单，这意味着它停留在同一个页面上。我的问题是如何从第一个表单中获取数据，因为第二个表单的内容依赖于这些信息。这是我的html： <div clas
浏览 0提问于2012-09-23得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
