开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

我想这样做:当我单击一个div时，它会隐藏其他div

当您单击一个div时，隐藏其他div的操作可以通过使用JavaScript来实现。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .mydiv {
      width: 100px;
      height: 100px;
      background-color: red;
      color: white;
      text-align: center;
      display: inline-block;
      margin: 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="mydiv" onclick="hideOtherDivs(this)">Div 1</div>
  <div class="mydiv" onclick="hideOtherDivs(this)">Div 2</div>
  <div class="mydiv" onclick="hideOtherDivs(this)">Div 3</div>
  <div class="mydiv" onclick="hideOtherDivs(this)">Div 4</div>

  <script>
    function hideOtherDivs(clickedDiv) {
      var divs = document.getElementsByClassName("mydiv");
      for (var i = 0; i < divs.length; i++) {
        if (divs[i] !== clickedDiv) {
          divs[i].style.display = "none";
        }
      }
    }
  </script>
</body>
</html>

在上面的代码中，有4个div元素，它们都具有相同的类名mydiv。每个div元素都有一个onclick事件绑定到hideOtherDivs(this)函数上。当用户单击一个div时，该div会作为参数传递给hideOtherDivs函数。

hideOtherDivs函数遍历所有具有类名mydiv的div元素。如果当前遍历到的div元素不是被单击的div，则将其样式的display属性设置为none，使其隐藏起来。

这样，当您单击一个div时，其他的div都会被隐藏起来。

请注意，以上代码仅为示例，以演示如何实现隐藏其他div的功能。在实际应用中，您可能需要根据具体需求进行修改和优化。

相关搜索:jQuery切换()，按钮我想单击一个按钮并隐藏所有其他div 单击另一个div时隐藏/显示DIV 显示一个div并在单击时隐藏其余div jQuery切换(单击以显示一个div而隐藏其他div)寻找在单击链接时显示div和隐藏其他div的方法如何在单击另一个div时隐藏div 尝试一次切换一个div，并在单击按钮时隐藏所有其他div 当我打开我的网站时，如何隐藏默认的<div>元素？如何在div外部单击和隐藏，以及当我将其拖动到div外部时保持隐藏(mouseup，mousedown...)Jquery 有父div和子div。希望我的工具提示从子div中删除。当我悬停父潜水时它会下降单击时展开一个div并收缩其他div，再次单击后恢复到正常状态无法导入Jsonbject，当我这样做时，我得到一个错误我想在每次点击时隐藏和显示一个div 当我点击一个div时，我不能改变它的状态我正在尝试在Tesseract上安装阿拉伯数据，但当我这样做时，它会给我这样的结果：如何使用JS或JQuery甚至bootstrap在一个div被单击时隐藏另一个div？在单击按钮时隐藏div元素，并用另一个div替换它，而不使用jquery Bootstrap折叠当我单击一个时，只有它会展开，其余的会自动隐藏 P标记显示为链接，当我单击它时，它会将我带到div中包含的同一链接当我用javascript (没有JQerry)点击一个div的时候，我如何隐藏它？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

如何像黑客军团主角那样将文件隐藏在音频中

这些年来黑客军团（Mr. Robot）一直是我最喜欢的电视剧，演员Rami Malek所扮演的有社交焦虑症，游离于肤浅而物质的社会之边缘却又想让世界更美好的年轻人这一角色让我印象很深，不过我喜欢这部电视剧并不是因为我想要像主角Elliot那样在生活中进行真实的入侵。Rami Malek的演绎是无与伦比的，我相信未来几年我们会更多地在电视剧中看到他。顺带一提，我觉得对于Evil Corp员工的叙述有点枯燥，特别是Tyrell Wellick，有点陈词滥调的感觉，不过总体来说，这部剧是自绝命毒师以来最棒的一部！

08

如何像黑客军团主角那样将文件隐藏在音频中

这些年来黑客军团（Mr. Robot）一直是我最喜欢的电视剧，演员Rami Malek所扮演的有社交焦虑症，游离于肤浅而物质的社会之边缘却又想让世界更美好的年轻人这一角色让我印象很深，不过我喜欢这部电视剧并不是因为我想要像主角Elliot那样在生活中进行真实的入侵。Rami Malek的演绎是无与伦比的，我相信未来几年我们会更多地在电视剧中看到他。顺带一提，我觉得对于Evil Corp员工的叙述有点枯燥，特别是Tyrell Wellick，有点陈词滥调的感觉，不过总体来说，这部剧是自绝命毒师以来最棒的一部！

04

对话框、模态框和弹出框看起来很相似，它们有何不同？

Web 平台概念有时可能完全不同，但有时看起来又非常相似。语义、行为和特征可能都很难区分。由于一个新的 popover 属性正在被提出，所以这篇文章将探讨对话框(dialogs)、弹出窗口(popovers)、叠加层(overlays)和揭示小部件(disclosure widgets)之间的区别。我们还将了解元素为 modal 时的含义。所有相关的概念看起来都非常相似，至少在我看来是这样的，那就让我们开始吧！

00

Chrome 102：新增两个 HTML 属性、两个 JS API !

inert 属性是一个全局的 HTML 属性，它可以告诉浏览器忽略元素的用户输入事件，包括焦点事件和来自辅助技术的其他事件。主要是下面两种用例：

03

Web前端学习第4章 jQuery 2 jQuery常用方法

上一章我们讲解了使用jQuery选择器获取元素，并通过一些方法来操作元素，本章我们讲解事件的概念，通过事件我们可以加强用户与浏览器的交互性，例如可以实现当用户点击某个元素的时候，对元素做一些操作，或是移动鼠标，对元素做一些操作。

03

4 个 useState Hook 示例

到 React 16.8 目前为止，如果编写函数组件，然后遇到需要添加状态的情况，咱们就必须将组件转换为类组件。

02

【融职培训】Web前端学习第4章 jQuery 2 jQuery常用方法

上一章我们讲解了使用jQuery选择器获取元素，并通过一些方法来操作元素，本章我们讲解事件的概念，通过事件我们可以加强用户与浏览器的交互性，例如可以实现当用户点击某个元素的时候，对元素做一些操作，或是移动鼠标，对元素做一些操作。

01

React 我爱你，但你太让我失望了

大家好，我是 ConardLi，最近网上掀起了一波吐槽 React 的热潮，不知道你做何感想呢？

02

分享5个关于 Vue 的小知识，希望对你有所帮助（二）

大家好，上一篇文章《分享5个关于 Vue 的小知识，希望对你有所帮助（一）》，今天我们继续分享5个关于 Vue 的小知识，希望对你有所帮助。

02

图像 alt 属性中存储的 XSS 漏洞以窃取 cookie

览这个 Web 应用程序的目的是寻找错误，但我在这个过程中很早就开始了，只是想了解一下这个应用程序是如何工作的。

00

CSS笔记(15)

overflow属性指定了如果内容溢出一个元素的框(超出其高度及宽度)时,会发生什么.

01

React.memo() 和 useMemo() 的用法与区别

导语 | 本文翻译自 Adebola Adeniran 在 LogRocket 论坛中关于 React.memo() 和 useMemo() 对比与用例分析。在软件开发中，我们通常痴迷于性能提升以及如何使我们的应用程序执行得更快，从而为用户提供更好的体验。 Memoization 是优化性能的方法之一。在本文中，我们将探讨它在 React 中的工作原理。什么是 memoization？编者注解在解释这个概念之前，让我们先来看一个简单的斐波那契程序： function fibonacci(n){

01

问与答98：如何根据单元格中的值动态隐藏指定的行？

Q：我有一个工作表，在单元格B1中输入有数值，我想根据这个数值动态隐藏行2至行100。具体地说，就是在工作表中放置一个命令按钮，如果单元格B1中的数值是10时，当我单击这个命令按钮时，会显示前10行，即第2行至第11行；再次单击该按钮后，隐藏全部的行，即第2行至第100行；再单击该按钮，则又会显示第2行至第11行，又单击该按钮，隐藏第2行至第100行……也就是说，通过单击该按钮，重复显示第2行至第11行与隐藏第2行至第100行的操作。如图1所示。

01

送你43道JavaScript面试题

这两天的GitHub Trending repositories被一个名叫 javascript-questions的项目霸榜了，项目中记录了一些JavaScript题目。

02

送你43道JavaScript面试题

这两天的GitHub Trending repositories被一个名叫 javascript-questions的项目霸榜了，项目中记录了一些JavaScript题目。

01

送你43道JavaScript面试题

这两天的GitHub Trending repositories被一个名叫 javascript-questions的项目霸榜了，项目中记录了一些JavaScript题目。

03

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

React 是一种流行的 JavaScript 库，用于构建动态用户界面。在一个 React 应用程序中，有时需要一个按钮或链接来触发显示或隐藏一个相关的组件。这种需求可以通过使用 React 状态管理和事件处理机制来实现。

01

前端攻坚战

三大新框架：Angular.js、React.js、Vue.js。今天我们来磕这个最常用，影响极广的框架：Vue.js。

01

基于SpringBoot打造在线教育系统（6）-- 二级分类模块UI篇

这一节来做二级分类，为了快速开发，一级分类只做新增，暂时不考虑修改和删除，如果一定要删，就去数据库删吧。

01

用js实现一个div弹出图层

点击按钮后弹出图层，图层处于页面中间、带有阴影的圆角边框、图层中有input、提交按钮、关闭按钮、标题，弹出后背景页面不可点击、背景变灰。所有代码不分开、放在一个html中显示。

05

如何用Python抓取最便宜的机票信息（上）

这个项目的目标是为一个特定的目的地建立一个web scraper，它将运行和执行具有灵活日期的航班价格搜索（在您首先选择的日期前后最多3天）。它保存一个包含结果的Excel，并发送一封包含快速统计信息的电子邮件。显然，目的是帮助我们找到最好的交易！

02

Web 性能优化：使用 React.memo() 提高 React 组件性能

React.js 核心团队一直在努力使 React 变得更快，就像燃烧的速度一样。为了让开发者能够加速他们的 React 应用程序，为此增加了很多工具:

04

关于 defineAsyncComponent 延迟加载组件在 vue3 中的使用总结

使用 vue 3 的 defineAsyncComponent 特性可以让我们延迟加载组件。这意味着它们仅在需要时从服务器加载。

06

加速 Vue.js 开发过程的工具和实践

在本文中，我们将着眼于应该采用的实践，应该避免的事情，并仔细研究一些有助于编写 Vue.js 的有用工具。我将主要关注 Vue 2，因为大多数人和组织仍在使用旧版本。不过不用担心，因为这里提到的大多数内容仍然适用于 Vue 3，因为它只是一个增压和更快的版本。不过，如果您已经了解 Vue 2 并且只想了解 Vue 3 中的新功能，那么您可以查看迁移指南以了解更多信息。

09

useLayoutEffect的秘密

大家好，我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder。

01

webAPIs03-属性选择器、环境对象this、事件、页面对象

事件流是对事件执行过程的描述，了解事件的执行过程有助于加深对事件的理解，提升开发实践中对事件运用的灵活度。

01

极意 · 代码性能优化之道

代码敲久了，就会对代码的质量格外关注，这里总结了一些在开发中遇到的对代码性能优化的技巧及相关的原理的阐述（主要基于 v8 引擎）。

01

43道JavaScript面试题

在函数中，我们首先使用var关键字声明了name变量。这意味着变量在创建阶段会被提升（JavaScript会在创建变量创建阶段为其分配内存空间），默认值为undefined，直到我们实际执行到使用该变量的行。我们还没有为name变量赋值，所以它仍然保持undefined的值。

02

HTML中实现右键菜单功能

我们使用的应用系统很多都有右键菜单功能。但是在网页上面，点击右键一般显示的却是IE默认的右键菜单，那么我们如何实现自己的右键菜单呢？下面将讲解右键菜单功能的实现原理和实现代码。

03

CSS隐藏元素的几种方式

回流：当我们修改元素的几何位置属性，如宽度、高度时，浏览器会重新布局，这个过程就叫回流

02

React Native按钮详解|Touchable系列组件使用详解

尊重版权,未经授权不得转载本文出自:贾鹏辉的技术博客(http://www.devio.org) 在做App开发过程中离不了的需要用户交互，说到交互，我们首先会想到的就是按钮了，在React Native中没有专门的按钮组件。为了能让视图能够响应用的的点击事件，我们需要借助Touchablexxx组件，来包裹我们的视图。为什么说是Touchablexxx呢，因为它不只是一个组件，而是一组组件，一下四个组件都可以用来包裹视图来响应用户的点击事件。 TouchableWithoutFeedback：

07

【jQuery动画】显示与隐藏效果

在网页开发中，适当地使用动画可以使页面更加美观，进而增强用户体验。jQuery中内置了一系列方法用于实现动画，当这些方法不能满足实际要求时，用户也可以自定义动画。本期我们一起来了解一下显示与隐藏效果吧~

01

5个让你提高工作效率的 VueUse 库函数

英文 | https://learnvue.co/2021/07/5-vueuse-library-functions-that-can-speed-up-development/

01

深入理解JavaScript中的事件传播机制：事件冒泡和事件捕获

在JavaScript中，事件冒泡和事件捕获是两种不同的事件传播方式。当一个事件被触发时，它会从最内层的元素开始，然后逐级向外传播，直到最外层的元素。在这个过程中，事件会经过每一个元素，直到它到达最外层的元素。这个过程就是事件冒泡。相反，事件捕获是从最外层的元素开始，然后逐级向内传播，直到最内层的元素。在这个过程中，事件会经过每一个元素，直到它到达最内层的元素。

02

jQuery：详解jQuery中的事件（一）

之前用过一些jQuery的动画和特效，但是用到的部分也不超过10%的样子，感觉好浪费啊——当然浪费的不是jQuery，而是Web资源。后来就想深入研究下jQuery的内部机理，读过两遍jQuery源代码，但是自觉还差的好远，跟好多大神（比如阮一峰）的理解还是有很大差距。现在就一点一点积累自己的知识体系，记录自己学到的和自己所理解的jQuery。

02

简单的聊一聊如何用CSS制作一个专业的头部页眉（Headers）

在本文中，我们将探索一些基本的技巧和提示，以帮助您使用CSS创建令人惊艳的页眉布局。我们并不过多关注设计，而是专注于创建布局，并了解创建布局时可能遇到的困难。

01

25个 Vue 技巧，开发了5年了，有些竟然还是第一次见！

学习成为一个更好的Vue开发者并不总是关于那些需要花时间和精力才能掌握的大概念。掌握一些技巧和窍门，可以让我们的编程生活变得更容易--没有大量重复的工作。

01

25个 Vue 技巧，开发了5年了，才知道还能这么用

学习成为一个更好的Vue开发者并不总是关于那些需要花时间和精力才能掌握的大概念。掌握一些技巧和窍门，可以让我们的编程生活变得更容易--没有大量重复的工作。

04

Zapier Central，目前最被低估的 AI 工具之一！

Zapier Central 的 Chrome 扩展程序是目前最被低估的 AI 工具之一。它会抓取您所在的任何网站，然后自动执行 6,000 多个应用程序中的操作。

00

分享30个你必须知道的JS基础知识

今天这篇文章整理了30个你必须知道的关于JavaScript的常识点，无论你是面试还是日常开发，都会给你很大的帮助。

03

Vue 3 响应式基础

reactive 相当于 Vue 2.x 中的 Vue.observable() API ，为避免与 RxJS 中的 observables 混淆因此对其重命名。该 API 返回一个响应式的对象状态。该响应式转换是“深度转换”——它会影响嵌套对象传递的所有 property。

03

正道的光！这有个用TensorFlow做的小黄图过滤器

相信每个人都遇到过这种情况：想下载一部电影或一个软件，结果跳出一堆色情广告，因为怕同学或同事误会，不得不赶紧关掉浏览器。这种情况广泛存在于电子书、电影等资源类网站以及插件、模板等工具类网站，给广大网友带来了很大困扰。

01

7道题，测测你的职场技能

当我们鼠标单击“显示值”列的任一单元格，在编辑栏里，我们可以看到其“内核”其实是和输入值一致的。

01

Ajax与jQuery异步加载数据

一次性从服务器数据库中读取数据并传送到前端页面上是不现实的，一方面会加重服务器的压力，另一方面客户的带宽资源也会被占用。Ajax刚好可以解决数据异步加载的问题。Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

02

python测试开发django-188.Bootstrap折叠（Collapse）插件

前言折叠（Collapse）插件可以很容易地让页面区域折叠起来。如果您想要单独引用该插件的功能，那么您需要引用 collapse.js， bootstrap已经包含了这个插件。可以直接引用 bootstrap.js 或压缩版的 bootstrap.min.js 折叠（Collapse）以使用带有属性的链接href或带有属性的按钮data-target。在这两种情况下，data-toggle=”collapse”都是必需的。单击下面的按钮以通过类更改显示和隐藏另一个元素： .collapse隐藏内容

05

Chrome开发者工具的11个高级使用技巧

本文作者从开发者角度出发，介绍了几个关于 Chrome 开发者工具的高级用法。熟练使用这些高级用法可以大大地提高你的生产力。

06

事件高级

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

02

知识点 | JavaScript事件浅析

一个网页由三层组成（html 结构，js 行为，css 表现），一切的东西其实都建立在html上，html里面的dom提供了一些事件，然后通过js封装，我们可以用js去调用dom上的事件。事件有很多，有我用过的有我没用过的，今天我想分析一番。

03

vue之vue-router实例

本文转自: https://www.cnblogs.com/SamWeb/p/6610733.html

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭