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

如何使用三个按钮(每个按钮属于一个div)在三个div之间动态切换隐藏/显示?

要实现三个按钮在三个div之间动态切换隐藏/显示,可以使用JavaScript和CSS来实现。

首先,需要给每个按钮和对应的div添加唯一的标识符,例如给按钮1添加id="button1",给div1添加id="div1",以此类推。

然后,可以使用JavaScript来监听按钮的点击事件,并根据点击的按钮来切换div的显示状态。可以使用CSS的display属性来控制div的显示和隐藏。

下面是一个示例代码:

HTML部分:

代码语言:txt
复制
<div id="button1" onclick="toggleDiv('div1')">按钮1</div>
<div id="button2" onclick="toggleDiv('div2')">按钮2</div>
<div id="button3" onclick="toggleDiv('div3')">按钮3</div>

<div id="div1" class="hidden">内容1</div>
<div id="div2" class="hidden">内容2</div>
<div id="div3" class="hidden">内容3</div>

CSS部分:

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

JavaScript部分:

代码语言:txt
复制
function toggleDiv(divId) {
  var div = document.getElementById(divId);
  if (div.style.display === "none") {
    div.style.display = "block";
  } else {
    div.style.display = "none";
  }
}

在上述代码中,通过给按钮添加onclick事件,调用toggleDiv函数,并传入对应的div的id来实现切换显示和隐藏。toggleDiv函数首先获取对应的div元素,然后判断其当前的display属性值,如果是none,则将其设置为block,即显示div;如果是block,则将其设置为none,即隐藏div。

这样,当点击按钮时,对应的div就会动态地切换隐藏和显示。

注意:上述代码只是一个简单的示例,实际应用中可能需要根据具体需求进行修改和扩展。

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

相关·内容

  • 简易登录页面实现

    表单处理和提交 登录页面包含了三个不同的登录选项,每个选项都有一个表单用于输入用户名和密码,并提交登录请求: 标签,显示为"Login",居中对齐。 在.tab类的中,有三个登录选项的按钮,分别对应"Student"、“Teacher"和"Admin”。...这些按钮一个共同的.tablinks类,其中一个按钮默认具有active类。通过点击这些按钮,可以切换显示不同的登录选项。...每个登录选项的表单都包含一个输入用户名的文本框和一个输入密码的密码框,以及一个"Login"按钮。文本框和密码框都有一个required属性,表示必填项。...总体来说,这段代码通过使用HTML和CSS实现了一个简单的登录页面,利用JavaScript实现了选项卡的切换和内容的显示隐藏。用户可以选择不同的登录选项,并填写相应的用户名和密码进行登录。

    27620

    简易登录页面实现

    表单处理和提交 登录页面包含了三个不同的登录选项,每个选项都有一个表单用于输入用户名和密码,并提交登录请求: 标签,显示为"Login",居中对齐。 在.tab类的中,有三个登录选项的按钮,分别对应"Student"、“Teacher"和"Admin”。...这些按钮一个共同的.tablinks类,其中一个按钮默认具有active类。通过点击这些按钮,可以切换显示不同的登录选项。...每个登录选项的表单都包含一个输入用户名的文本框和一个输入密码的密码框,以及一个"Login"按钮。文本框和密码框都有一个required属性,表示必填项。...总体来说,这段代码通过使用HTML和CSS实现了一个简单的登录页面,利用JavaScript实现了选项卡的切换和内容的显示隐藏。用户可以选择不同的登录选项,并填写相应的用户名和密码进行登录。

    23830

    【jQuery动画】显示隐藏效果

    easing:切换效果(过渡效果),默认过渡效果为swing,还可以使用linear效果。 fn:在动画完成时执行的函数。...实现效果 当点击“显示”,则div中的内容会显示,并弹出提示框,点击“隐藏”则隐藏内容,弹出提示框,点击“切换”,则会在二者之间切换。...HTML、CSS部分 思路: 1、定义显示隐藏切换三个功能按钮,定义div元素; 2、设置div元素的样式,宽度、高度和背景颜色。...jQuery代码,如果在文档没有完全加载之前就运行函数,操作可能失败; 3、给三个按钮添加点击事件,这里用到筛选选择器eq; 4、实现单击显示按钮,控制div元素的显示(show),并弹出提示框(alert...); 5、实现单击隐藏按钮,控制div元素的隐藏(hide),并弹出提示框; 6、实现单击切换按钮,控制元素显示隐藏切换(toggle)。

    6.7K10

    Jump Start Bootstrap 第4章

    我们将会看到如何添加下拉菜单到导航栏、切换按钮的状态、当点击按钮时漂亮的警告信息会在显示一段时间后消失等等功能。...让我展示一个如何使用这些事件的例子。我已经写了下面的JQuery代码片段去监听所有的下拉插件状态,并打印每个事件触发时的状态。 <!...在本节中,我们将使用Bootstrap创建一个警告消息,并查看如何添加解除功能。 这里是”成功”警告消息的代码: 每个警报都应该有一个警戒等级。...按钮 在前面的章节中,我们看到了如何创建各种类型的按钮。这里,我们将看到使用Bootstrap的JavaScript插件如何在不同的状态使用它们,并且让它们切换状态。...包裹体可以有三个类panel-collapse、collapse和in;类collapse用来折叠和隐藏面板中panel-body的内容,而in显示这些内容。

    28.3K40

    第51次文章:JQuery高级

    三个预定的值("slow","normal","fast")或表示动画时长的毫秒数值(如:1000) easing:用来指定切换效果,默认是"swing",可用参数"linear" swing:动画执行时效果是...广告显示5秒后,自动消失 (2)分析 使用定时器来完成。...setTimeout(执行一次定时器) 分析发现JQuery的显示隐藏动画效果其实就是控制display属性值 使用 show/hide方法来完成广告的显示 (3)代码实现 <!...”按钮,小相框的图片快速切换,点击“停止”按钮,小相框内的图片暂停,大相框展示小相框内的内容。...1、$.fn.extend(object) 增强通过Jquery获取的对象的功能,属于对象级别的插件,例如:$("#id") 我们用一个案例来展示一下插件的使用。如下案例所示: <!

    3.6K30

    浅谈前端角色权限方案

    FinClip 前端工程师在前端中如何实现不同角色与权限的控制及落地,从而控制不同的用户能够访问不同的页面呢? 前言 对于大部分管理后台而言,角色权限都是一个重要的环节。...此时该用户退出账号,使用一个普通成员的账号登录。...项目需求该系统存在三个角色:职员、领导和高层领导。职员不具备修改、删除以及发布的功能,他只能查看列表。当职员进入该页面时,页面上只显示列表内容。其他三个相关功能的按钮移除(或弹窗提示)。...凡是具备 R 权限的用户就显示该列表内容。 发布需求属于新增操作,设定凡是具备 C 权限的用户就显示按钮。 同理修改按钮对应着 U 权限,删除按钮对应着 D 权限。...那么当张三访问上图中的页面时,页面中应该只显示列表和发布需求按钮。 我们现在要做的就是设计一个方案尽可能让页面内容方便被权限编码控制。

    1.9K60

    Vue路由详解(路由基础,路由轮播,路由传参,通配符路由)

    一个组件,直接充当a标签使用.但是在最后渲染时,vue还是会将其渲染成a标签 3.routes: 数组,用来做路由信息的配置 4.router: 对象,通过该对象的方法实现路由的跳转,例如按钮点击实现跳转...要切换的组件在根组件里挖一个坑,然后在index.js里的routes数组中配置路由信息,每个路由都是一个对象,每个对象里都有两最基本的属性:path...重定向的目标可以是一个方法,动态返回重定向目标: redirect的值是一个函数. routes: [ {path: '/a',component:Mine,children:[...hideOnClick: true, //点击slide时显示/隐藏按钮 disabledClass: 'my-button-disabled', //前进后退按钮不可用时的类名。...这个选项设置为true时点击Swiper会隐藏/显示分页器。 clickable: true, //此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换

    3.1K21

    jQuery框架实现元素显示隐藏动画【附案例分析】

    首先来看一个简单的动画效果图: 我之前也和小伙伴们讲过使用jQuery框架可以很好的对html中元素的属性等进行操作,所以上面显示隐藏的也只是一个div,而并不是一个图片。...下面我就来和小伙伴们讲一个如何对元素的属性进行操作,使其显示或者隐藏!...* linear:动画执行时速度是匀速的 fn:在动画完成时执行的函数,每个元素执行一次。 同时在这里提醒一点就是,以上的三个参数是可有可无的,如果不对其进行设置,那么将以默认值执行。...同样也是三个参数是可有可无的,如果不对其进行设置,那么将以默认值执行。在这里我们增加一个最后的执行函数,让其弹出一个窗口“隐藏了...”。...button" value="点击按钮显示div" onclick="showFn()"> <input type="button" value="点击<em>按钮</em><em>切换</em><em>div</em><em>显示</em>和<em>隐藏</em>" onclick="toggleFn

    6.4K20

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

    React 是一种流行的 JavaScript 库,用于构建动态用户界面。在一个 React 应用程序中,有时需要一个按钮或链接来触发显示隐藏一个相关的组件。...在上一节中,我们已经编写了一个简单的点击按钮切换组件可见性的例子。接下来,我们将看看如何使用事件处理函数实现更高级的功能。显示/隐藏菜单我们可以使用事件处理函数来显示隐藏菜单。...当用户单击菜单按钮时,菜单应该出现,然后当用户单击菜单外部时,菜单应该消失。下面是一个示例,展示如何使用 React 和事件处理函数来实现菜单的显示隐藏。...下面是一个示例,展示如何使用 React 和事件处理函数来实现模态对话框的显示隐藏。...当用户单击关闭按钮时,我们将可见性设置为 false,模态对话框将被隐藏。小结在本文中,我们介绍了如何使用 React 来实现点击显示隐藏一个组件。

    4.9K10

    一文深入JQuery

    文章目录 动画 三种方式显示隐藏元素 默认显示隐藏方式 滑动显示隐藏方式 淡入淡出显示隐藏方式 遍历 js的遍历方式 jq的遍历方式 jq对象.each(callback) $.each...三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如:1000) easing:用来指定切换效果,默认是"swing",可用参数"linear" swing:动画执行时效果是...jq对象.each(callback) 语法: jquery对象.each(function(index,element){}); index:就是元素在集合中的索引 element:就是集合中的每一个元素对象...this:集合中的每一个元素对象 回调函数返回值: true:如果当前function返回为false,则结束循环(break)。...使用 show/hide方法来完成广告的显示 */ //入口函数,在页面加载完成之后,定义定时器,调用这两方法 $(function () { //定义定时器,调用adShow

    3.3K30

    【Vue】「Vue.js 入门指南」(三)常用指令的含义与用法

    前言 本篇博文是《Vue.js 打怪升级之路》中入门系列的第三篇博文,主要内容是详细介绍 Vue 常用指令的含义与用法,并通过一个案例—电子宣传小册的制作,来展示如何使用 Vue 的指令进行开发,往期系列文章请访问博主的...,实现根据不同的条件来动态显示隐藏元素。...v-show:用于根据条件来控制元素的显示隐藏,但不是直接从 DOM 中移除。当条件为真时,元素会显示;当条件为假时,元素会隐藏,但仍占据 DOM 空间。一般用于频繁切换的场景。 代码如下: <!...,实现根据不同的条件来动态显示隐藏元素。...的按钮,来实现不同文章的切换

    31010

    BuildAdmin19:如何使用el-popover弹出框,实现个人资料页面

    我分析了一下原因,就是头像和名称是一个整体,div的宽度和其他导航按钮一样,我设置成了一个固定值,导致没有空间显示img,所以被隐藏了。...default插槽定义的就是弹出框内容,这里主要分为三个部分,从上而下是头像、名称、时间和两功能按钮。功能按钮是用primary和danger两类型的el-button实现的。...中,所以还是使用flex弹性布局列(column)分布,而两按钮是左右分布,所以使用flex弹性布局的行(row)分布。....个人资料在点击个人资料页面之后,会打开一个tab页,其实这就是一个路由的实现。...BuildAdmin05:如何玩转Vue路由动态加载BuildAdmin07:导航栏动态添加tabs,vue如何实现

    13310

    Vue学习笔记(二)

    组件的后缀名是**.vue** 每个.vue 组件可有三个部分组成: template:组件的模板结构(必须包含), 只能有一个根节点 script:组件的 Javascript 行为 style:组件的样式...: pink; h2 { color: red; } } 2.1 组件使用三个步骤 使用 import 语法导入要用的组件 在 components...每个 vue 的组件实例上,都包含一个**refs 对象,里面存储着对应的 DOM 元素或组件的引用。默认情况下,组件的refs 指向一个空对象**。...$refs.myh3来修改,如: 使用 ref 引用组件实例: 控制文本框和按钮的按需切换:(点击按钮按钮隐藏,文本框显示;文本框失去焦点,按钮显示,文本框隐藏;文本框显示时自动获取焦点) <template...动态组件 动态组件指的是动态切换组件的显示隐藏 vue 提供了一个内置的组件,专门用来实现动态组件的渲染。

    2.4K30

    vue-router详解——小白速会

    而传统的多页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间切换,也就是组件的切换。...路由中有三个基本的概念 route, routes, router。...[{home 按钮 =>home内容 }, { about按钮 => about 内容}] 3. router 是一个机制,相当于一个管理者,它来管理路由。...客户端中的路由,实际上就是dom 元素的显示隐藏。当页面中显示home 内容的时候,about 中的内容全部隐藏,反之也是一样。...,当使用对象作为路由的时候,to前面要加一个冒号,表示绑定 2.4跳转 vue-router 有两种跳转页面的方法 第一种是使用内置的<router-link>组件,它会被渲染为一个标签,如:

    1.6K70
    领券