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

如何使用JS或JQuery甚至bootstrap在一个div被单击时隐藏另一个div?

使用JS或JQuery在一个div被单击时隐藏另一个div的方法如下:

  1. 使用JS实现:// 获取需要操作的div元素 var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2");

// 给div1绑定点击事件

div1.addEventListener("click", function() {

代码语言:txt
复制
 // 隐藏div2
代码语言:txt
复制
 div2.style.display = "none";

});

代码语言:txt
复制
  1. 使用JQuery实现:// 给div1绑定点击事件 $("#div1").click(function() { // 隐藏div2 $("#div2").hide(); });
  2. 使用Bootstrap实现:<div id="div1" class="btn btn-primary">点击隐藏</div> <div id="div2" class="alert alert-success">要隐藏的内容</div>

<script>

// 给div1绑定点击事件

$("#div1").click(function() {

代码语言:txt
复制
 // 隐藏div2
代码语言:txt
复制
 $("#div2").hide();

});

</script>

代码语言:txt
复制

以上代码中,div1和div2分别代表需要操作的两个div元素。通过给div1绑定点击事件,当div1被单击时,使用不同的方法隐藏div2。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):提供弹性计算能力,满足不同规模业务的需求。详情请参考:腾讯云云服务器
  • 腾讯云云数据库 MySQL 版:提供高性能、可扩展的关系型数据库服务。详情请参考:腾讯云云数据库 MySQL 版
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的云端存储服务。详情请参考:腾讯云对象存储(COS)
  • 腾讯云人工智能(AI):提供丰富的人工智能服务,包括图像识别、语音识别、自然语言处理等。详情请参考:腾讯云人工智能(AI)
  • 腾讯云物联网(IoT):提供全面的物联网解决方案,帮助连接和管理物联网设备。详情请参考:腾讯云物联网(IoT)
  • 腾讯云区块链服务(BCS):提供一站式区块链服务,支持快速搭建和管理区块链网络。详情请参考:腾讯云区块链服务(BCS)
  • 腾讯云视频处理(VOD):提供高效、稳定的视频处理服务,包括转码、截图、水印等功能。详情请参考:腾讯云视频处理(VOD)
  • 腾讯云音视频通信(TRTC):提供实时音视频通信能力,支持多人音视频通话和互动直播。详情请参考:腾讯云音视频通信(TRTC)
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Jump Start Bootstrap 第4章

这两种使用插件的方式,我们都将讨论,你可以选择最适合你的。 本章将使用的全部插件都包含在文件bootstrap.jsbootstrap.min.js中。...Bootstrap使用JQuery库来完成全部和JavaScript相关的操作;因此,Bootstrap中自定义JavaScript相关操作,导入JQuery.js是必须的。...Bootstrap为下拉插件提供了一些附加事件,它们是: show.bs.dropdown: 这个事件句柄被单击触发;下拉句柄收到请求去显示隐藏菜单; shown.bs.dropdown: 这个事件菜单被显示触发...让我展示一个如何使用这些事件的例子。我已经写了下面的JQuery代码片段去监听所有的下拉插件状态,并打印每个事件触发的状态。 <!...你甚至可以使用Bootstrap的网格系统来组织内容。 最后,为了创建一个模式页脚,我们定义了一个div元素,它有一个类modal-footer。默认情况下,模式页脚中的内容是右对齐的。

28.3K40

Bootstrap快速入门

Bootstrap学习有两个重点,一个是概念的理解,理解bootstrap如何通过div来代替过去的table布局的;一个是常用结构的熟悉,做到需要的组件及时能找到,组合一下就可以满足需求。...CSS基本回顾 优先级:(过去有一些误区)如何确定CSS的优先级,需要引入一个机制,分别用数字(a,b,c,d)表示优先组合,a表示style属性(行内样式),优先级最高,但由于一般使用class样式,...上绑定了一个单击事件,利用冒泡机制,单机的时候检查是否为td元素,如果是才处理 //而把td作为选择器,一个页面有多少td都会被绑定,性能下降,这三个参数的名字呗称为享元模式(回顾一下)。...常用js插件 之前CSS的基础上,BootStrap自带12种jQuery插件,其利用bootstrap数据API,大部分插件可以不编写任何代码的情况下触发。...这部分最重要的是思路,自定义样式,为了避免覆盖BootStrap默认的样式行为,建议通过附加样式的形式来实现。

4.1K61

前端移动web-day05学习笔记

下载之后,会得到一个安装包,我们只需要将安装包中的css font js 这三个文件夹放到项目目录即可 下载jquery:由于bootstrap这个框架里面的js代码使用的是一个js框架叫做jquery...-- 要使用bootstrap,需要导入三个文件 --> <script src="<em>js</em>/<em>bootstrap</em>.min.<em>js</em>...<em>在</em>屏幕宽度小于768起作用 6-栅格<em>隐藏</em> zz.jpg <em>在</em>某个查询区间,将栅格<em>隐藏</em>,可以用<em>隐藏</em>的样式,这个样式包括四个: 1、.hidden-xs <em>在</em>屏幕小于768<em>时</em>将栅格<em>隐藏</em> 2、.hidden-sm...<em>在</em>屏幕大于等于768小于992<em>时</em>将栅格<em>隐藏</em> 3、.hidden-md <em>在</em>屏幕大于等于992小于1200<em>时</em>将栅格<em>隐藏</em> 4、.hidden-lg <em>在</em>屏幕大于等于1200<em>时</em>将栅格<em>隐藏</em> 注意点 a:如果设置<em>一个</em>栅格<em>隐藏</em>样式为...hidden-md:表示该栅格只会在 768 <= 屏幕尺寸 <992区间<em>隐藏</em>,如果屏幕尺寸 <= 768,则又会显示 b.如果希望<em>一个</em>栅格<em>在</em>屏幕尺寸 <= 992<em>时</em><em>隐藏</em>,可以设置栅格<em>隐藏</em>样式为:hidden-sm

2.9K20

基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化

各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往页面新增、编辑、查看详细等界面使用弹出对话框层的方式进行显示数据...,删除则可能使用一个提示确认框,如果操作成功,我们可以使用更丰富的提示框来处理,本篇主要对比说明Bootstrap开发中用到的这些技术要点。...键或者鼠标单击其他空白处,则会自动隐藏对话框的。...Bootbox.js一个小的JavaScript库,它帮助您在使用bootstrap框架的时候快速的创建一个对话框,也可以帮您创建,管理删除任何所需的DOM元素js事件处理程序。...它的使用JS代码如下所示。 //显示一个警告,没有标题 toastr.warning('My name is Inigo Montoya.

5.1K50

Spring国际认证指南:使用 WebSocket 构建交互式 Web 应用程序

原标题:Spring国际认证指南|了解如何通过 WebSocket 浏览器和服务器之间发送和接收消息 本指南将引导您完成创建“Hello, world”应用程序的过程,该应用程序浏览器和服务器之间来回发送消息...WebSocket 是 TCP 之上的一个轻量级的薄层。这使得它适合使用“子协议”来嵌入消息。本指南中,我们使用带有 Spring 的STOMP消息传递来创建交互式 Web 应用程序。...选择 Gradle Maven 以及您要使用的语言。本指南假定您选择了 Java。 单击Dependencies并选择Websocket。 单击生成。...webjars/jquery/jquery.min.js"> </script...此时,您可以发送另一个名称,也可以单击“断开连接”按钮关闭连接。 概括 恭喜!您刚刚使用 Spring 开发了一个基于 STOMP 的消息传递服务。

1.9K20

BootstrapVue 入门

使用 BootstrapVue,任何人都可以从 Vanilla.js jQuery 切换到 Vue.js,而无需担心 BootstrapjQuery 的严重依赖,甚至无法找到解决方法。...它有助于弥补这一差距,并允许 Vue 开发人员能够轻松地在他们的项目中使用 Bootstrap。 入门 使用 webpack、babel 等模块捆绑包,最好直接把这些包包含到项目中。...上面的命令会显示一个预设的选择对话框,如下所示: ? 选择 default,然后单击Enter继续: ?...使用npmyarn 我们将使用npmyarn安装之前提到的包。...请注意,Cards组件中,有一个生命周期hook来修改数据。数据在被渲染到浏览器之前填充到b-card组件中。 接下来,更新App.vue文件,用来捕获最近的更改并将正确的组件呈现给浏览器。

2.6K40

JavaWeb——JQuery之高级操作应用及实践案例总结(动画、遍历、事件绑定)

; 2)easing:用来指定切换效果,默认是"swing",效果是先慢,中间快,最后又慢;参数"linear",匀速; 3)fn:动画完成执行的函数,每个元素执行一次。.../js/jquery-3.3.1.min.js"> //隐藏div function hideFn(){ /*...2 JQuery遍历 js的遍历方式是使用for循环,JQuery提供了三种遍历方式: 1)JQuery对象.each(callback):回调函数中的参数 index(索引) element(元素对象...,当点击对应组件,会执行fn1,再次点击会执行fn2...,若只有2个,则循环执行。注意:JQuery1.9后该功能删除了,要使用的话引入jquery-migrate-1.0.0.js插件。...使用off解除btn按钮的单击事件 $("#btn2").click(function () { //解除btn按钮的单击事件

9.4K20

Python全栈之jQuery笔记

对于HTML元素本身就带有的固有属性,处理,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,处理,使用attr方法....jQuery进行值获取,只会返回第一个元素对应的值. 1.3 操作样式类名(jQuery获取并设置 CSS 类): $("#div1").addClass("divClass2") //为...dblclick() 鼠标双击 当单击元素,发生click事件....; }); 触发hello事件 element.trigger("hello"); 事件冒泡: 一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序...前端性能优化分为如下几个方面: 一、代码部署: 1、代码的压缩与合并 2、图片、js、css等静态资源使用和主站不同域名地址存储,从而使得传输资源不会带上不必要的cookie信息.

5.4K40

实时音视频开发学习3 - 实现web端跑通知识储备

本节内容主要讲解如何快速使用SDK包,SDK集成方式,SDK目录结构解释以及web端和小程序端进行跑通。...项目中使用npm集成SDK包 npm install trtc-js-sdk --save 项目脚本中直接引入模块包 import TRTC from 'trtc-js-sdk'; web页面脚本中直接引入...使用 本次demo使用的是bootstrap4进行开发,它依赖于jQuery、Popper.js以及JavaScript插件,能快速构建响应式移动设备的web站点。...因为函数实际上是一种对象,它可以存储变量中,通过参数传递给另一个函数,也可以作为函数的返回结果。因此我们可以将一个函数作为参数或者作为另一个函数的返回结果,从而形成函数的回调。...web端demo执行流程 看官开始看源码可以先自动屏蔽share-client.js文件,只需要集中注意力看如何实现登陆即可。

1.5K20

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

事件冒泡可能会引起预料之外的效果,上例中,本来只想触发元素 的click事件,然而 元素和元素的click事件也同时触 发了.因此有必要对事件的作用范围进行限制.当单击元素,只 触发元素的click...件对象的一些属性程序中使用事件对象非常简单,只需要为函数添加一个参 数....举一个例子,项目中,经常需要验证表单,单击”提交”按钮是,验证表单内容,例如元素是否是必填字段,某元素长度是否够6位,单表单不符合提交条件,要阻止表单的提交 eg: $(“#sub”).bind(...jQuery 1.3中也可以接受一个字符串了。 •callback:载入成功回调函数。...跨域:一个服务器上,去访问另一个服务器 jQuery如何实现跨域请求?使用JSONP形式实现跨域。 javascript如果调用另一个域程序,不能执行当前域js函数。

8.2K20

Bootstrap框架

它支持响应式布局,并且V3版本之后坚持移动设备优先。 为什么要使用Bootstrap?...Bootstrap出现之前: 命名:重复、复杂、无意义(想个名字费劲) 样式:重复、冗余、不规范、不和谐 页面:错乱、不规范、不和谐 使用Bootstrap之后: 各种命名都统一并且规范化。.../3.0.0/jquery.min.js"> <script src="http://cdn.bootcss.com/<em>bootstrap</em>/3.3.6/<em>js</em>/<em>bootstrap</em>.min.<em>js</em>...通过 .fade类来控制模态框弹出<em>时</em>的动画效果(淡入淡出效果)。 通过<em>在</em> .modal-bodydiv中设置 .row可以<em>使用</em><em>Bootstrap</em>的栅格系统。...调用方式: 1.通过data属性 通过<em>在</em><em>一个</em>触发弹出模态框的元素(例如:按钮)上添加 data-toggle="modal"属性,然后设置 data-target="#foo"属性 href="#foo

3.9K70

一文深入JQuery

文章目录 动画 三种方式显示和隐藏元素 默认显示和隐藏方式 滑动显示和隐藏方式 淡入淡出显示和隐藏方式 遍历 js的遍历方式 jq的遍历方式 jq对象.each(callback) $.each...先慢,中间快,最后又慢 linear:动画执行时速度是匀速的 fn:动画完成执行的函数,每个元素执行一次。.../js/jquery-3.3.1.min.js"> /* 需求: 1. 当页面加载完,3秒后。自动显示广告 2....使用定时器来完成。setTimeout (执行一次定时器) 2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display 3....使用 show/hide方法来完成广告的显示 */ //入口函数,页面加载完成之后,定义定时器,调用这两个方法 $(function () { //定义定时器,调用adShow

3.3K30

jQuery」基础 - 03

因为ul中的li是JS动态创建的,页面加载Docoment中并没有此元素,选择器并不能选取。...jQuery 多库共存 实际开发中,很多项目连续开发十多年,jQuery版本不断更新,最初的 jQuery 版本无法满足需求,这时就需要保证旧有版本正常运行的情况下,新的功能使用新的jQuery版本实现...下载位置 water 代码演示 插件的使用三点: 引入css; 引入JS; 引入html。 有的简单插件只需引入html和js甚至有的只需引入js。...Bootstrap组件使用非常方便: 引入bootstrap相关css和js 去官网复制html 代码演示 引入bootstrap相关css和js 1.4.5. bootstrap插件(JSbootstrap中的js插件其实也是组件的一部分,只不过是需要js调用功能的组件,所以一般bootstrapjs插件一般会伴随着

2.8K30

Jump Start Bootstrap 第1章

经历了15次重大更新之后,2013年的Bootstrap3是另一个重要的版本,成为了“移动为先,总是响应”的框架。早期版本的Bootstrap3框架中,响应式的网站是一个可选项。...广告已经隐藏在标题部分,并且标志已经居中了。布局非常完美。 ? 智能手机视图中,如图所示,我们可以看到标题部分继续遵循平板电脑的样式,但内容部分发生了重大变化。..."> 注意:jquery.min.js 必须放在 bootstrap.min.js 文件之前引用,否则会报 Uncaught Error: Bootstrap...首先,我们/css文件夹中创建一个名为app.css(任何你想要的)的新文件。然后我们打开index.html并链接到新的CSS文件。...注意,我们使用Bootstrap类btn和btn - primary来覆盖CSS样式。从此以后,每当您使用Bootstrap的按钮组件,它将会有一个类似于上图的更改样式。

3.5K40

BootStrap应用开发学习入门

-- 需求3: 包含 jQuery 库请务必bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/<em>jquery</em>/2.1.1...-- <em>隐藏</em>状态栏/设置状态栏颜色:只有<em>在</em>开启WebApp全屏模式<em>时</em>才生效。 content的值为default | black | black-translucent 。...#按钮状态 .active #按钮<em>在</em>激活<em>时</em>将呈现为<em>被</em>按压的外观(深色的背景、深色的边框、阴影)按钮元素 / 锚元素 .disable #禁用<em>一个</em>按钮<em>时</em>,它的颜色会变淡 50%,并失去渐变。...dropdown" .dropdown-menu #ul 标签 设置二级菜单样式 .caret #span标签 脱字号;补注号 data-toggle="dropdown" #需要下拉的 嵌套: 您可以一个按钮组内嵌套另一个按钮组...,即,一个 .btn-group 内嵌套另一个 .btn-group 。

17.4K20
领券