首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

显示隐藏的div并关闭其他div,以便一次显示1个

在前端开发中,我们经常需要实现显示隐藏的效果,其中一种常见的方式是通过控制div元素的显示和隐藏来实现。下面是一种实现方式:

HTML结构:

代码语言:txt
复制
<div class="container">
  <button onclick="toggleDiv(1)">显示/隐藏1</button>
  <div id="div1" class="hidden">内容1</div>
  <button onclick="toggleDiv(2)">显示/隐藏2</button>
  <div id="div2" class="hidden">内容2</div>
  <button onclick="toggleDiv(3)">显示/隐藏3</button>
  <div id="div3" class="hidden">内容3</div>
</div>

CSS样式:

代码语言:txt
复制
.hidden {
  display: none;
}

JavaScript代码:

代码语言:txt
复制
function toggleDiv(divNumber) {
  var div = document.getElementById("div" + divNumber);
  var buttons = document.getElementsByTagName("button");
  for (var i = 0; i < buttons.length; i++) {
    var button = buttons[i];
    if (button !== event.target) {
      var otherDiv = document.getElementById("div" + button.getAttribute("onclick").match(/\d+/)[0]);
      otherDiv.classList.add("hidden");
    }
  }
  div.classList.toggle("hidden");
}

上述代码中,我们通过给每个按钮绑定一个onclick事件来实现点击按钮时显示或隐藏对应的div。在toggleDiv函数中,我们首先获取到要显示或隐藏的div元素,然后遍历所有的按钮,将除当前点击的按钮外的其他div元素隐藏起来。最后,通过classList.toggle方法来切换当前div元素的显示或隐藏状态。

这种方式可以实现一次只显示一个div,并且点击其他按钮时会自动关闭当前显示的div。你可以根据实际需求修改HTML结构和JavaScript代码来适应不同的场景。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):腾讯云提供的弹性计算服务,可满足各种规模的业务需求。详情请参考腾讯云云服务器产品介绍
  • 腾讯云对象存储(COS):腾讯云提供的安全、稳定、低成本的云端存储服务,适用于各种场景下的数据存储和管理。详情请参考腾讯云对象存储产品介绍

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求和情况进行。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Bootstrap 辅助类教程演示

    类 描述 实例 .pull-left 元素浮动到左边 尝试一下 .pull-right 元素浮动到右边 尝试一下 .center-block 设置元素为 display:block 居中显示 尝试一下....clearfix 清除浮动 尝试一下 .show 强制元素显示 尝试一下 .hidden 强制元素隐藏 尝试一下 .sr-only 除了屏幕阅读器外,其他设备上隐藏元素 尝试一下 .sr-only-focusable...与 .sr-only 类结合使用,在元素获取焦点时显示(如:键盘操作用户) 尝试一下 .text-hide 将页面元素所包含文本内容替换为背景图 尝试一下 .close 显示关闭按钮 尝试一下 ....caret 显示下拉式功能 尝试一下 ---- 更多实例 关闭图标 使用通用关闭图标来关闭模态框和警告框。...: #DA81F5;"> 向右快速浮动 结果如下所示: 显示隐藏内容 您可以通过使用 class .show 和 .hidden 来强行设置元素显示隐藏

    1.1K40

    接口测试平台代码实现18:帮助页面2

    我们对每段说明都 放在了一个子span中,以便我们后续控制显示/隐藏,不同span id也不同,分别是help_1 ~ 5 好,按照我们设计呢,用户一进来时候,右侧只显示第一条文档:项目列表... 项目有自己权限保护系统,用户可放心在里面进行安全测试任务,而不被其他人打扰 项目之间可以共享有 host域名,以便其他人在编辑接口时复用 <br...函数: 注意我这里构思,分俩段,1是隐藏全部,2是显示指定。...最简单安全方式就是如此设计,先一股脑全隐藏了,然后再显示对应。...关于我刚刚说那种显示多个bug,我详细 大家在日常测试中 应该也遇到过那么一次两次 开发bug吧,就是忘记隐藏掉之前记录。

    97230

    jq---方法总结

    后者是前者经过压缩处理后版本,它去除了多余注释、空白字符等信息,缩短了变量名称,以减小js文件体积。建议你在生产环境中使用该文件,以便于用户浏览器能够更快地加载jQuery库。...$("selector").toggle(); // 切换显示/隐藏元素(如果显示隐藏隐藏显示),其用法与show()类似 /* 下面的slide*、fade*系列方法与上面的show()、hide...").slideUp(); // 隐藏显示元素,带有向上滑动过渡动画效果 $("selector").slideToggle(); // 切换显示/隐藏元素,带有向上/下滑动过渡动画效果 $("...").fadeToggle(); // 隐藏显示元素,带有淡出过渡动画效果 / 设置所有匹配元素css样式"width: 200px; height: 100px",执行一个当前样式到指定样式过渡动画效果...isFunction( function(){} ); // true var result2 = $.isFunction( new Function() ); // true // 检索数组中是否存在指定值,返回其第一次出现索引

    3K20

    《精通reactvue组件设计》之手把手实现一个轻量级可扩展模态框(Modal)组件

    正文 在开始组件设计之前希望大家对css3和js有一定基础,了解基本react/vue语法.我们先来解构一下Modal组件, 一个Modal分为以下几个部分: 每一个区块都可以自定义配置, 也可以组合其他组件...={maskStyle}> } } 通过以上实现,我们很容易控制一个modal组件具体显示那些元素,以及那些元素是可关闭modal,具体案例如下: 1....去除mask遮罩 2.3 实现visible(带有弹窗出来和隐藏动画animation) 熟悉antd或者element朋友都知道,visible用来控制modal显示隐藏,我们这里也来实现同样功能...,关于隐藏显示动画,我们这里用transform:scale来实现。...'none' : 'block'}}> 由以上代码我们知道模态框显示隐藏是通过设置display:none/block来控制,但是我们都知道display:none是不能执行动画效果,为了实现内容弹窗动画

    2.7K11

    如何在 React 中点击显示隐藏另一个组件?

    在上一节中,我们已经编写了一个简单点击按钮来切换组件可见性例子。接下来,我们将看看如何使用事件处理函数实现更高级功能。显示/隐藏菜单我们可以使用事件处理函数来显示隐藏菜单。...显示/隐藏模态框我们可以使用事件处理函数来触发模态对话框显示隐藏。当用户单击打开模态框按钮时,模态框应该出现;当用户单击关闭按钮或模态框之外时,模态框应该消失。...如果用户单击元素不在模态对话框中,则将可见性设置为 false,模态对话框将被隐藏。否则,模态对话框保持可见。我们还添加了一个关闭按钮,用于关闭模态对话框。...当用户单击关闭按钮时,我们将可见性设置为 false,模态对话框将被隐藏。小结在本文中,我们介绍了如何使用 React 来实现点击显示隐藏另一个组件。...我们还给出了两个示例:如何显示/隐藏菜单和如何显示/隐藏模态框。这些示例可以用作参考,帮助你在自己 React 应用程序中实现点击显示隐藏另一个组件功能。

    4.9K10

    接口测试平台代码实现32:接口列表备注功能

    所以打开P_apis.html: 新建了这个div备注弹层: 注意其中有个隐藏input,这个是用来存储我们打开接口id以便我们点击保存按钮时候,系统知道是要保存哪个接口备注。...注意这个div本体也要隐藏,只是为了方便调试,我们在最后才加上隐藏属性。...效果如下: 然后我们给div加上id和隐藏属性,写好打开它函数:open_bz()然后让备注按钮onclick=这个函数。...修改成如下:(前面.value不小心写成了.vallue,大家注意下) 解释上图:先清空这个文本框,防止用户之前打开了其他接口备注内容显示在这个接口上。...然后请求后台,把接口id给过去,等后台返回这个接口备注后,显示div,存放好id,把返回备注加载到文本框。

    55330

    【Web APIs】JavaScript 操作元素 ⑥ ( 关闭对话框案例 | display 属性简介 | 页面标签结构和样式 | 盒子模型细节 | 绝对布局要点 - 设置负值即可超出父容器模型 )

    ; 显示对话框 : 设置 display:block 属性 ; 隐藏对话框 : 设置 display:none 属性 ; 2、display 属性简介 标签元素 display 属性 可用于定义一个元素如何在页面上显示..., 该属性 控制了元素盒模型特性 , 如 : 尺寸、布局方式和如何处理与其他元素关系 ; display 属性不同值可以影响页面的 布局 和 元素可见性 ; display 属性值 设置参考...: block : 将元素 设置 为 块级元素 ; 块级元素会在 新行上开始 , 占据整行宽度 ; 常见块级元素有 、、 ; inline : 将元素 设置 为 行内元素...结合了 block 块级元素 和 inline 行内元素 特性 ; 行内块元素 在行内显示 , 但可以设置宽度和高度 , 且元素不会换行 ; none : 隐藏元素 , 元素不会显示在页面上 ,...*/ /* display: none; 隐藏元素*/ } 内部 div 标签元素 只是 用于显示一行字 , 没有其它作用 , 设置 50 x 50 像素 居中显示文本即可

    10910

    BuildAdmin16:边栏隐藏、页面全屏,我用vue是如何实现

    前言 弹出框五个标签功能,重新加载、关闭标签、关闭其他标签、关闭所有标签都已经实现了,现就剩下当前标签全屏标签还没有实现。 在BuildAdmin中,一共实现了两种全屏。...一种是main区域全屏,即边栏消失,页面占据整个浏览器页面,是在弹出框实现。 另一种全屏是页面占据整个显示器屏幕,是在后面的导航菜单栏实现。 本篇文章要讲的是第一种全屏方式实现。..."> 取消全屏组件主要部分,就是\d定义关闭图标,其他div元素都是用来触发事件和改变元素位置。...因为第二个div上移30px,留在浏览器内大小只有10px了。如果没有这个100 * 60div,鼠标只要稍微移动,就会触发mouseout事件,取消全屏按钮就会隐藏。...本篇文章也是第五期训练营第21篇文章,写完本篇又到了沉淀慢节奏时刻了,休息一段时间,整理一下BuildAdmin系列初稿,然后排版二次创作之后完成文章输出,期待下一次相见。

    62700
    领券