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

我尝试在点击时单独显示几个div

在点击时单独显示几个div,可以通过使用JavaScript来实现。以下是一个示例的解决方案:

首先,在HTML中定义几个div元素,并为它们添加不同的id,以便在JavaScript中进行操作:

代码语言:txt
复制
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>

然后,使用JavaScript来控制div的显示和隐藏。可以通过添加事件监听器来实现在点击时显示或隐藏特定的div元素:

代码语言:txt
复制
// 获取div元素的引用
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

// 添加点击事件监听器
div1.addEventListener("click", function() {
  // 显示div1,隐藏其他div
  div1.style.display = "block";
  div2.style.display = "none";
  div3.style.display = "none";
});

div2.addEventListener("click", function() {
  // 显示div2,隐藏其他div
  div1.style.display = "none";
  div2.style.display = "block";
  div3.style.display = "none";
});

div3.addEventListener("click", function() {
  // 显示div3,隐藏其他div
  div1.style.display = "none";
  div2.style.display = "none";
  div3.style.display = "block";
});

在上述代码中,通过设置div元素的style.display属性来控制其显示或隐藏。当点击不同的div时,对应的div将显示,其他div将隐藏。

这是一个简单的示例,你可以根据实际需求进行扩展和修改。

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

相关·内容

面向前端的 Lottie & AE 动画手把手入门教学

本文作者:IMWeb HuQingyang 原文出处:IMWeb社区 未经同意,禁止转载 因为我一直比较关注 Web 领域的设计趋势, 很早之前就听很说了 Lottie 这个项目, 但是一直没时间和机会去尝试..., 最近终于有时间机会于是尝试了一把, 在这里分享一下。...值得一提的是, Lottie 在 Web 上是借助 Canvas 或者 SVG 来渲染动画的, 动画的关键帧在导出时已经被计算好了, 除了解析JSON之外基本没有性能损耗, 因此效率非常高! 二....点击图层面板的右上角, 显示曲线面板, 如图: ? 曲线面板的X轴是时间, Y轴是属性值, 最低点为0, 最高点为设置的最大值, 曲线的便是属性的变化, 曲线的斜率便是加速度的值。...我们无法同时为两个属性设置曲线, 需要将X和Y方向的位移属性分开, 右键点击图层面板的位置属性, 选择选择单独尺寸, 然后我们就可以单独为Y方向的位移属性设置曲线了, 如图: ?

3K50

当 Vue 处理数组与处理纯对象的方式一样

修改数组长度时,Vue 也不能监测到。 使用与处理纯对象相同的方式 既然在单独处理数组时,有以上弊端,那为什么不使用和纯对象一样的方式?...(this.test 打印出来正常,在 html 中渲染出 null) 为了探究此问题,我尝试在 html 中输出一个数组变量: const arr = [1, 2, 3] document.write...const obj = { a: 1 } console.log(obj.toString()) // [object Object] 也就是说,当你尝试在页面输出一个变量时,JavaScript 会自动调用...为了得到验证,我尝试使用以下两种不同方式: Vue 单独处理数组的方式; 和处理纯对象相同的方式。 通过两者页面 Load 时间,来对比性能差异。...el: '#app', data: { test: arr } }) 当使用 Vue 单独处理数组的方式时: 当使用与处理纯对象相同的方式时: 可见性能上,前者还是好很多

7910
  • 当 Vue 处理数组与处理纯对象的方式一样

    修改数组长度时,Vue 也不能监测到。 使用与处理纯对象相同的方式 既然在单独处理数组时,有以上弊端,那为什么不使用和纯对象一样的方式?...(this.test 打印出来正常,在 html 中渲染出 null) 为了探究此问题,我尝试在 html 中输出一个数组变量: const arr = [1, 2, 3] document.write...const obj = { a: 1 } console.log(obj.toString()) // [object Object] 复制代码 也就是说,当你尝试在页面输出一个变量时,JavaScript...为了得到验证,我尝试使用以下两种不同方式: Vue 单独处理数组的方式; 和处理纯对象相同的方式。 通过两者页面 Load 时间,来对比性能差异。...el: '#app', data: { test: arr } }) 复制代码 当使用 Vue 单独处理数组的方式时: ?

    97720

    vue封装带提示框的单选多选文本框组件

    在最近的vue+element的前端项目中,需要实现动态渲染带提示框的单选/多选文本框,具体的效果如下图所示,在输入框聚焦时,前端组件通过接收的kv参数渲染出选项,用户点击选项选中,可以将选择的选项的key...提示框显示隐藏交互实现 细化上述需求,需要在用户点击输入框(获取焦点)时,显示提示框,在用户点击空白区域时隐藏提示框,点击组件自身时不做任何操作。...组件的模板结构如下,通过show变量控制提示框的显示与隐藏,在组件的输入框绑定聚焦和失焦事件: @focus="onfocus" 和 @blur="onblur",在focus时设置变量show为true...div> 此处有一个小小的细节,由于选项元素在输入框外,用户点击输入框外的选项元素必然会导致输入框失焦从而触发blur自动关闭,如下图所示。...问题2:上述操作只考虑了点击事件的关闭,忽略了其他可能需要关闭的情况,如使用tab按键切换输入框时也需要能正常显示与隐藏提示框。 问题3:绑定事件过多会带来性能隐患甚至导致意想不到的问题发生。

    5.4K403

    给测试小妹做了一个js版屏幕录制工具iREC,她用后竟说喜欢我

    于是我决定先在JavaScript方向上尝试实现这个工具。...经过一番的尝试与搜索我得出:在浏览器上使用JavaScript做录屏功能使用的主要API是navigator.mediaDevices.getDisplayMedia() 与 MediaRecorder...点击分享后,在屏幕的下方会有一个如下的标识 图2:屏幕分享tab信息​ 并且在启动分享的tab上有一个红色的标识 图3:屏幕分享tab标识 ​ 点击了分享之后,我们的系统就发起了一个分享,...一个流包含几个_轨道_,比如视频和音频轨道。这个MediaStream可以直接使用 html中的video 标签显示出具体的内容。 ​ 于是一个清晰的思路就出现了。...) MediaRecorder.onstart 用来处理 start 事件, 该事件在媒体开始录制时触发 MediaRecorder.onpause用来处理 pause (en-US) 事件, 该事件在媒体暂停录制时触发

    1.3K20

    vue封装带提示框的单选多选文本框组件

    在最近的vue+element的前端项目中,需要实现动态渲染带提示框的单选/多选文本框,具体的效果如下图所示,在输入框聚焦时,前端组件通过接收的kv参数渲染出选项,用户点击选项选中,可以将选择的选项的key...提示框显示隐藏交互实现 细化上述需求,需要在用户点击输入框(获取焦点)时,显示提示框,在用户点击空白区域时隐藏提示框,点击组件自身时不做任何操作。...组件的模板结构如下,通过show变量控制提示框的显示与隐藏,在组件的输入框绑定聚焦和失焦事件: @focus="onfocus" 和 @blur="onblur",在focus时设置变量show为true...div> 此处有一个小小的细节,由于选项元素在输入框外,用户点击输入框外的选项元素必然会导致输入框失焦从而触发blur自动关闭,如下图所示。...**问题2:**上述操作只考虑了点击事件的关闭,忽略了其他可能需要关闭的情况,如使用tab按键切换输入框时也需要能正常显示与隐藏提示框。

    7.8K30

    如何在React中写出更好的代码

    点击上方关注 TianTianUp,一起学习,天天进步 在React中编写更好的代码的提示,关于Linting、propTypes、PureComponent和其他几个点,帮你编写更好的代码。...在这篇文章中,我将向你展示一些提示,以帮助你成为一个更好的React开发者。 我将涵盖从工具到实际代码风格的一系列东西,这可以帮助你提高你的React技能 主要有以下几个方面: 代码提示。...这一点的好处是: 我不需要写一个单独的函数。 我不需要在我的渲染函数中再写一个 "if "语句。 我不需要在组件中创建一个 "链接 "到其他地方。 编写内联条件语句是非常简单的。...这样,只有当条件语句返回 "真 "时,该组件才会被显示出来。 ---- 使用代码片段库 打开一个代码编辑器(我使用VS Code),并创建一个.js文件。...在这个文件中,当你输入rc时,你会看到类似这样的东西。 点击进入,你会立即得到下面这段代码: 这些代码片段的好处是,它们不仅能帮助你潜在地保存错误,而且还能帮助你识别最新的语法。

    2.5K10

    【腾讯云 Cloud studio 实战训练营】真正做到让你的开发成本只在编码

    用户在使用Cloud Studio 时无需安装,随时随地打开浏览器就能在线编程Cloud Studio 作为在线 IDE,包含代码高亮、自动补全、Git 集成、终端等IDE 的基础功能,同时支持实时调试...足够我来深度体验了,作为前端开发的我自然选择前端技术相关的模板——Cloud Studio 构建Vue 快速还原 律师H5;废话不多说直接开干; 选择Vue模板图片点击后就会为我们自动初始化框架相关配置...非也,在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时,可以使用 unplugin-vue-components 插件,它可以自动引入组件,并按需引入组件的样式。...,我们可以直接将代码发不到github以及coding,我们就都来尝试一下吧图片 代码发布到CODING再次打开我们的CODING平台点击创建项目;选择了第一个模板图片创建完成后我们回到主页...,然后点击这里确认授权就好了;图片点击发不到CODING储存库=》选择账号=》选择项目图片---Cloud Studio 开发贪吃蛇上面按照官方提供的模板我们进行了尝试,然后我也自己通过Cloud Studio

    33430

    手把手教你用Python脚本调用 DeepL API Pro 进电子书的行进行中英文自动翻译

    大家好,我是我是Python进阶者。 一、前言 前几天有个叫【张茜】的粉丝找我看了一个代码,关于电子书中英文自动翻译的,感觉挺有意思,这里拿出来给大家分享下。...我都是在 Amazon 上直接买,而后在电脑上安装一个老版本的 Kindle App,用鼠标右键点击书名,下载,并不打开该电子书,而后退出 Kindle。...(我尝试过使用命令行工具包 pandoc,但,比较之后,发现 Calibre 在保留样式方面可能更好一点……) 在 Terminal 里用 unzip 命令解开 htmlz 压缩包。...,比较灵活; 可以通过插入 javascript 函数指定某种特定语言的显示(比如,只显示中文); 可以用来作为源文件转换成任意格式的电子书…… 另外,在调用 tag_handling="xml" 之后...) # div> 之前添加空行 pttn = r'div>' rpl = r'\n\ndiv>' re.findall(pttn, htmltext) htmltext = re.sub(

    2.5K30

    尝试使用 JavaScript 写脚本来辅助记忆单词(也是一种单词记忆方式的构想)

    在电脑上,我可以在点击一次按钮后,用键盘上的 enter 、 空格 键来进行点亮下一个。...所以,同样,也为了应付几个月后的那场考试,我必须得在短时间内,高效率提升我的词汇量。...其实为了背单词,我付出的努力真不少,高中,尝试过各种办法,装兜里单词纸,不午休背单词,贴桌子上,甚至写床上,在大学我甚至牺牲了早上睡回笼觉的美妙时刻,专门拿着手机 APP 背单词,什么扇贝单词、百词斩...是单独的一个个单词,下面是我凭自己理解,写的一些调侃的话。为的是我对它有印象。 图片 像这样(这是我在本地 Excel 里写的条目原稿)。...因为颜色透明,我点击最后一个,它会不显示意思,直接翻页,这是不行的,然后如果在某个页面想让它翻页后,仍然红色显示,那就在这些 JS 上面,加上这条。

    60030

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

    正文 在开始组件设计之前希望大家对css3和js有一定的基础,并了解基本的react/vue语法.我们先来解构一下Modal组件, 一个Modal分为以下几个部分: 每一个区块都可以自定义配置, 也可以组合其他组件...可以配置自定义关闭图标 配置关闭时是否销毁Modal里的子元素 自定义模态框底部内容 控制是否支持键盘esc关闭 控制是否展示遮罩 控制点击蒙层是否允许关闭 自定义遮罩样式 自定义标题 控制对话框是否可见...={maskStyle}>div> } div> } 通过以上实现,我们很容易控制一个modal组件具体显示那些元素,以及那些元素是可关闭modal的,具体案例如下: 1....2.6 实现destroyOnClose 这个功能意思是在弹窗关闭时是否清除子元素,我在:《精通react/vue组件设计》之配合React Portals实现一个功能强大的抽屉(Drawer)组件这篇文章中有详细的介绍...要想实现该功能,我们需要处理如下几个事件: 当点击关闭按钮时,根据destroyOnClose销毁子组件 当点击确认按钮时,根据destroyOnClose销毁子组件 当visible为true,根据destroyOnClose

    2.7K11

    李洋个人博客导航底部滚动条显示位置百分比的图文教程

    好了,教程很简单,在网站添加html代码,然后在js添加监测代码,最后用css显示出来,以Z-blogPHP为例,修改前记得备份源文件。...div id="percentageCounter">div> ?...每款功能在最初的时候都是不断调试和修复中完成的,我知道您在首次尝试的时候可能会达不到预期的效果,但是不要气馁,相信自己,再试一次,一定会成功的。...有什么不懂得可以在本页留言,我会第一时间给予答复,感谢您的支持与信任!!!...PS:我刚刚按照教程,在另外一款小清新主题模板测试了下,好用,但是像我之前说的,具体的位置变化得慢慢调试,不要急,好了,使用小清新主题模板的下次更新就有这个功能啦。

    64620

    李洋个人博客导航底部滚动条显示位置百分比的图文教程

    最近有网友反馈喜欢本站导航栏底部滚动条显示位置百分比的特效,让我弄个教程,其实这个是很简单的,网上有很多教程,基本都是html+js+css,按照操作就行了,好吧,今天抽空把这个教程分享一下,声明,原作者是谁不详...好了,教程很简单,在网站添加html代码,然后在js添加监测代码,最后用css显示出来,以Z-blogPHP为例,修改前记得备份源文件。...每款功能在最初的时候都是不断调试和修复中完成的,我知道您在首次尝试的时候可能会达不到预期的效果,但是不要气馁,相信自己,再试一次,一定会成功的。...有什么不懂得可以在本页留言,我会第一时间给予答复,感谢您的支持与信任!!!...PS:我刚刚按照教程,在另外一款小清新主题模板测试了下,好用,但是像我之前说的,具体的位置变化得慢慢调试,不要急,好了,使用小清新主题模板的下次更新就有这个功能啦。

    48730

    body标签中相关标签

    然后在底部设置超链接,点击时将回到顶部(此时,网页中的url的末尾也出现了#top)。注意上图中红框部分的#号不要忘记了,表示跳到名为top的特定位置 如果我们将上面代码中的第二个a标签写成: 点击时就没有任何反应 例如:内容</2 javascript:(冒号)是表示在触发默认动作时...target属性有以下几个值: _self:在同一个网页中显示(默认值) _blank:在新的窗口中打开。..._parent:在父窗口中显示 _top:在顶级窗口中显示 blank就是“空白”的意思,就表示新建一个空白窗口。为啥有一个_ ,就是规定,没啥好解释的。...文本级的标签显示在浏览器上时,不管你的图片多高,它总会底边对齐,这是一种现象,“高矮不齐,底边对齐”。 此时大家可以给图片设置align属性,来查看效果吧!

    4.6K10

    学用Hooks写React组件——基础版移动端无缝轮播图组件

    因为最近在做移动端的东西,所以尝试写一个移动端的无缝轮播图,当前版本只支持手势切换和点击切换功能。文章主要包括从简单雏形到最终效果所有的思路和代码。...为了达成这个目的,就是在最后一个轮播图的后面加上第一个轮播图,当从最后一个切换到第一个时,先切换到备用的第一个,然后快速回滚到真正的第一个轮播图。...点击按钮单独呈现,代码如下: /* 可视区容器 */ div> /* 包裹容器 */ 1 2...children, selectedIndex = 1}) => { // 当切换的时候,改变的就是当前位置状态 // 所以定义当前位置,可以通过传入的selectedIndex来控制最开始显示第几个轮播图...container.current); manager.add(new Hammer.Pan()); manager.on('panend panmove', function(e) { // 状态在进行中时

    3.9K20

    Vue之Tabbar的实现

    ① 路由懒加载   首先,肯定有两个组件组成,当点击红色组件中的“首页”、“分类”、“购物车”、“我的”这四个小标题时,就能在蓝色组件中显示相应标题的内容。...2.结构和样式 ① html结构 在模板中用4个 div 分别表示“首页”、“分类”、“购物车”、“我的”。...2.思路   active图片的思路是一开始就传入了所有图片,当用户没有点击时显示图片1,当用户点击之后就显示图片2 而并不是当用户点击时才传入图片。...,提高了运行效率;   接着是当path为空时,就显示首页的信息,让用户一进来就显示首页的信息,而不是需要用户点击tabbar-item的“首页”才显示首页的信息,显得更加的合理;   最后就是tabbar-item...三、点击事件 1.目的   添加点击事件的目的很简单,就是希望用户点击“首页”时,上面的内容就变成和首页相关的内容。

    2.4K31

    nuxt使用antv-l7踩坑

    nuxt.js 下使用 antv-l7 实在是有太多的坑了,官方文档也不是很全,只能不断摸索和尝试,下面我把这些坑记录下来,也许能帮到你。...$l7maps 地图不能重复渲染,会卡死 这个坑出现的原因还没有找到,怀疑是 antv-l7 这个库在实现时有问题,也可能是与 nuxt 的某种机制冲突,因为好像单独用的时候是没问题的 问题表现如下:...假设有一个页面,叫做 map,其中有 2 个地图,中国地图和世界地图,这两个地图显示在不同的 div id= 中,利用一个 Switch 按钮切换 会出现的问题是,首次进入页面(不妨设进入中国地图)一切正常...地图图层和标注点的图层拖动时不一致,导致拖动后点的位置错位 position: relative 这个其实在官方文档写了,这个属性很重要,否则地图会铺满上层 div,并且缩放时点的位置会偏移 可以根据自己的情况考虑使用...GaodeMap 会铺满 大坑 如果设置了类似于父组件的宽度根据浏览器的宽度变化这样的功能,期望地图的大小始终跟着浏览器宽度变化的话,GaodeMao 没有任何问题,会自动铺满整个屏幕,但 MapBox 地图在初次显示时

    2.1K30

    记一次 Nuxt.js 登录页性能优化

    前言 最近有测试和 local 投诉,我们后台管理系统的登录页面经常要加载很久,常常会出现页面已经显示出来了,但是点击登录毫无反应,直到全部加载后才能登录。于是,他们提出让我们去优化。...我去 Jenkins 上看一下构建记录,在 build 的时候看到这个文件就是基于第三方包打出来的 vendors 文件。...于是我去看了一下 Nuxt 源码,发现这里还是暴露了配置给我们去定义一个新的 HTML 模板的。当然,到最后我也没去尝试这种方法,只是觉得应该可以实现。...我这里的方案是这样的,首先把登录页不需要且体积很大的几个包(iview、moment、lodash)给单独打了一个 my-vendors 的包,在 Nuxt 源码中用正则表达式去匹配这个文件名,然后手动...,对比前后两次加载的文件,差别只有这个 my-vendors.js,不清楚为什么点击事件失效,所以最终为了赶时间也就没使用这个方法。

    1K10
    领券