开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

我想这样做:当我单击一个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的时候，我如何隐藏它？

相关搜索:

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

有帮助

没帮助

相关·内容

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

举个例子，如果我想让一个计数器在用户点击按钮时每一秒都增加一次，我必须这样做： function Counter() { const [count, setCount] = useState(0...但是它们迫使我在不需要的代码上花费时间。例如，我有一个可以由用户拖动的“调试器”组件。用户还可以隐藏调试器。隐藏时，调试器组件不渲染任何内容。所以我很想“早点离开”，避免白白注册事件监听器。...我知道，我应该创建一个中间组件，如果 isVisible 是假的，那什么都不渲染。但是我为啥要这么做呢？这只是 “Hooks规则” 阻碍我的一个例子 - 然而还有很多其他的例子。...每当我拜访你的父母时，我都会结识新朋友。但后来事情变得一团糟了，你的父母参加了一个人群操纵计划。...让我想尝试一些别的东西，相比之下，所有其他的框架都是新鲜的。我不能放弃你宝贝问题是我不能离开你。首先，我爱你的朋友。

1.1K2 0

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

}) 我们先通过$(“selector”)选择器获取元素，然后通过click为元素定义事件，这样当我们用鼠标单击这个元素的时候，就会执行花括号中的代码。...输出文字我们现在实现一个功能，当我们点击一个按钮的时候，在控制台输出"hello world",代码如下所示。...三、其他鼠标事件上一节我们说了鼠标单击事件，其实鼠标事件还有很多，这节我们讲解鼠标移入，移出和移动事件。鼠标移入移出改变样式鼠标的移入和一出事件分别是mouseenter和mouseleave。...我们来实现一个功能，当我们的鼠标移入一个div的时候，让其变为红色，移出的时候，让其变为绿色，代码如下： .box{ width:100px; height...课后练习滑动显示和隐藏的右边栏，点击按钮弹出，电气其他位置隐藏。让图片跟随鼠标移动。返回顶部

1.6K1 0

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

}) 我们先通过$(“selector”)选择器获取元素，然后通过click为元素定义事件，这样当我们用鼠标单击这个元素的时候，就会执行花括号中的代码。...输出文字我们现在实现一个功能，当我们点击一个按钮的时候，在控制台输出"hello world",代码如下所示。...三、其他鼠标事件上一节我们说了鼠标单击事件，其实鼠标事件还有很多，这节我们讲解鼠标移入，移出和移动事件。鼠标移入移出改变样式鼠标的移入和一出事件分别是mouseenter和mouseleave。...我们来实现一个功能，当我们的鼠标移入一个div的时候，让其变为红色，移出的时候，让其变为绿色，代码如下： .box{ width:100px;...课后练习滑动显示和隐藏的右边栏，点击按钮弹出，电气其他位置隐藏。让图片跟随鼠标移动。返回顶部

1.9K3 0

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

这将创建一个全局混入，所以它会自动在所有组件中可用。在这个对象中，我们设置了methods属性，它是带有一些组件方法的对象。...我们将setShow设置为@click指令的值，以便在单击按钮时运行它。因此，当我们单击它时，div会显示，因为show变为true。 4、如何防止点击按钮时，点击事件冒泡到父级元素？...self修饰符，这样点击事件就只会限定在父级div中。...当我们点击每个div或span元素时，将会运行showAlert方法。 5、使用Vue.js滚动到一个元素有时候，我们需要使用Vue.js滚动到一个元素。...结论由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。

1512 0

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

inert 属性 inert 属性是一个全局的 HTML 属性，它可以告诉浏览器忽略元素的用户输入事件，包括焦点事件和来自辅助技术的其他事件。...例如，我们想开发一个模态框，你希望在模态框可见时将焦点聚焦在模态框内。或者，对于用户并不总是可见的抽屉，添加 inert 可确保当抽屉不在屏幕上时，键盘用户不会意外与其进行交互。...我么在第二个上声明了 inert 属性，因此其中包含的所有内容，包括，都无法获得焦点或被单击。...在我们正常使用的情况下，我们可能通过一些 disable 属性或者其他的 CSS 样式来隐藏掉网页内的某些内容，或者让它们不可交互，对于我们正常的用户肯定是没问题的。...但是对于上面提到的有视力障碍的人，他不是依靠视觉来感知网页内容，而是借助了一些其他的辅助技术，这就有可能会和我们隐藏掉的内容进行一些意外的交互。

1.9K3 0

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

在这样做的同时，我仍然喜欢关注一两个漏洞类型，以考虑我可以在哪里测试漏洞。...我的主要目标是 XSS，所以当我处理应用程序的流程时，我喜欢在用户输入字段或其他区域中添加 XSS 有效负载，然后在我完成其余部分时留意发生的任何有趣的事情应用程序的流程。很多时候，一事无成。...例如，我可能会在网页的左上角看到完整的有效负载作为常规文本输出（例如页面标题），但随后部分有效负载将在同一页面的另一部分中被剥离。除了，当我检查显示这些有效负载的上下文时，它们是相同的。...为了查看是否发生了任何事情，我右键单击了其中一个无效的有效负载并检查了该元素。我的 DevTools 一打开，我的眼睛就看到了一个看起来很奇怪的alt属性。...这样做的一个原因是因为一旦发布，这将是一个可供搜索引擎抓取并可以链接到任何人的公共页面。

1.3K0 0

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

把结果邮寄给你，我建议将excel文件保存到Dropbox文件夹中，这样你就可以随时随地访问它了。 ? 它会搜索“灵活日期”，因此它会在你首先选择的日期之前和之后的3天内查找航班。...另一个scraper 当我第一次开始做一些web抓取时，我对这个主题不是特别感兴趣。但是我想说!...每个Selenium项目都从一个WebDriver开始。我正在使用Chromedriver，但是还有其他的选择。PhantomJS或Firefox也很受欢迎。下载之后，把它放在一个文件夹里，就这样。...我选择了XPath，并不觉得有必要将其与CSS混合使用，但是完全可以这样做。...第一个选项查找id等于wtKI-price_aTab的元素，并遵循第一个div元素、四个div和两个span。这次会成功的。我现在就可以告诉您，id元素将在下次加载页面时更改。

3.8K2 0

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

当单单传入的 true 或 false 来控制某些条件不能满足需求时，我通常使用这个方法来做。按钮类型或警告类型(信息、成功、危险、警告)是最常见的用法、、。颜色也是一个很好的用途。 2....相反，v-show将创建该元素并将其留在那里，通过设置其样式为display: none来隐藏它。如果你要切换的组件的渲染成本很高，那么这样做会更有效率。...有条件地渲染插槽我们先来看如何做，然后在讨论为什么想隐藏插槽。每个Vue组件都有一个特殊的$slots对象，里面有你所有的插槽。默认槽的键是default，任何被命名的槽都使用其名称作为键。...使用条件插槽的主要原因有三个: 当使用封装的div来添加默认样式时插槽是空的如果我们将默认内容与嵌套槽相结合例如，当我们在添加默认样式时，我们在插槽周围添加一个div: ...检测元素外部(或内部)的单击有时我需要检测一个点击是发生在一个特定元素el的内部还是外部。这就是我通常使用的方法。

3.3K4 0

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

当单单传入的 true 或 false 来控制某些条件不能满足需求时，我通常使用这个方法来做。按钮类型或警告类型(信息、成功、危险、警告)是最常见的用法、、。颜色也是一个很好的用途。 2....相反，v-show将创建该元素并将其留在那里，通过设置其样式为display: none来隐藏它。如果你要切换的组件的渲染成本很高，那么这样做会更有效率。...有条件地渲染插槽我们先来看如何做，然后在讨论为什么想隐藏插槽。每个Vue组件都有一个特殊的$slots对象，里面有你所有的插槽。默认槽的键是default，任何被命名的槽都使用其名称作为键。...使用条件插槽的主要原因有三个: 当使用封装的div来添加默认样式时插槽是空的如果我们将默认内容与嵌套槽相结合例如，当我们在添加默认样式时，我们在插槽周围添加一个div: ...检测元素外部(或内部)的单击有时我需要检测一个点击是发生在一个特定元素el的内部还是外部。这就是我通常使用的方法。

2.4K1 0

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

我们并不过多关注设计，而是专注于创建布局，并了解创建布局时可能遇到的困难。 Space-Between在一个三列的页眉中无法居中首先，让我们谈谈三列页眉，因为这是我最常见到实现错误的一种情况。...首先，我使用的选择器过于具体化。这样做是为了使嵌套关系更加清晰。然后，页眉下的每个元素都是一个弹性容器。这也是不必要的。目前，它仅用于导航的最后一个子元素，以将其子元素移动到右侧。...当我们隐藏中间元素时，效果如下所示：当然，将登录替换为按钮是很简单的。所以，我们来谈谈其他的事情吧。...我们不关心视口有多大，但我们知道：如果我们的容器宽度小于400像素，它会变得非常难看。这是我真正期待被广泛支持的功能之一。...就是这样了，朋友们！非常感谢您的阅读！结束您是否知道关于页眉布局的其他常见错误？或者您是否了解其他具有挑战性的元素？我很乐意在评论中了解更多！

3831 0

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

作为一名长期合同工，我经常改变工作环境——当我在不同的团队、公司、国家工作时，措辞都会不同。词语的含义会随着时间而改变，整个世界都是这样……这很正常！...当您在其外部单击时，它会消失。...在一个字段中，用户需要选择一个国家。他们最终必须选择这个国家，因为它是必需的字段。然而，当他们选择国家时，他们可能想浏览其他内容，或者先弹出信用卡信息。...最好采用非模态对话框，因为用户可能想查看其他内容。定义弹出窗口您正在构建一个可切换提示符，用于在内容中显示复杂单词的定义。当定义图标被点击时，它会打开。...它在视口一侧打开，并在其打开时置于其他内容之上。当用户打开它时，这是他们唯一想要看到的东西吗？这是一个棘手的问题，我感觉模态对话框可以工作，非模态对话框也可以工作。

3.6K0 0

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

使用defineAsyncComponent延迟加载弹出组件在本例中，我们将使用一个由单击按钮触发的登录弹出窗口。...每当我们的应用程序加载时，我们不需要我们的应用程序加载此组件，因为只有在用户执行特定操作时才需要它。...虽然在这个例子中，这可能不是最大的性能问题，但它仍然会减慢加载速度，如果我们有几十个组件这样做，它真的会加起来。...但是，如果我们使用 defineAsyncComponent 查看同一个选项卡，我们会注意到当我们的页面加载时，LoginPopup.vue 不见了，这是因为它还没有加载。.../components/LoginPopup.vue")) 但是如果我们想让它在我们的模板中渲染，我们需要将它包装在一个 Suspense 元素中。

6.4K6 0

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

main区域应该是这样的，由上面一个面包屑导航，下面是一块一块的二级分类组成。...我们用了栅格布局，一行摆四个，它会根据屏幕宽度自适应的，和bootstrap是一样的路子，很简单。要不再给它加一个页签，也就是排序号。...这就代表当前用户还有三个分类没有阅读，这个数字是需要算出来的，如果用户完成了阅读，那么我就隐藏这个标记。哈哈，我可真是个小机灵鬼！不过呢，现在是后台管理系统，这个业务可以暂时先不做。...我们还可以先隐藏Main区域，当我们点击左侧某一个菜单的时候，才显示Main区域。当然，也可以不隐藏，默认显示所有的二级分类。...当我们点击左侧的一级分类，就需要调用后台的一个方法，把二级分类加载出来，显示在右侧。 ? 我们已经实现了一级分类的新增，那么，下一节就直接开始二级分类的加载吧。

4331 0

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

键或者鼠标单击其他空白处，则会自动隐藏对话框的。...上面的效果不是我很喜欢这种风格，我遇到一个看起来更加美观的效果，如下所示。 ? 这个效果是引入插件sweetalert（http://t4t5.github.io/sweetalert/）实现的。...一般它的弹出框代码可以做的很简单，如下所示。 ?...3、信息提示框的处理上面两种处理，都是利用弹出对话框进行实现的，而且对界面有阻塞的，一般情况下，我们做信息提示效果，希望它不要影响我们进一步的操作，或者至少提供一个很短的自动消失效果。...显示到页面上所需时间：毫秒 HideTimeEffect : 200, // 从页面上消失所需时间：毫秒 LongTrip : 15, // 当提示条显示和隐藏时的位移

5.2K5 0

useLayoutEffect的秘密

处理“更多”按钮当我们胸有成竹的把上述代码运行后，猛然发现，我们还缺失了一个重要的步骤：如何在浏览器中渲染更多按钮。我们也需要考虑它的宽度。同样，我们只能在浏览器中渲染它时才能获取其宽度。...❝只有在需要根据元素的实际大小调整 UI 而导致的视觉闪烁时使用 useLayoutEffect。对于其他所有情况，useEffect 是更好的选择。...在 Next.js 和其他 SSR 框架中使用 useLayoutEffect 当我们将使用useLayoutEffect处理过的自适应导航组件写入到任何一个SSR框架时，你会发现它还是会产生闪烁现象。...当我们启用了 SSR 时，意味着在后端的某个地方调用类似React.renderToString()的东西。...如何解决这个问题涉及用户体验问题，完全取决于我们想“默认”向用户展示什么。我们可以向他们显示一些“加载”状态而不是菜单。或者只显示一两个最重要的菜单项。或者甚至完全隐藏项目，并仅在客户端上渲染它们。

2441 0

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

当我们输入时，每个字符都会触发历史数组中的一个新条目，如果我们单击撤消/重做，我们将转到相应的条目。还有不同的选项可以为此功能添加更多功能。...每当我们更改对象的值时，useVModel 都会向父组件发出更新事件。这是父组件可能是什么样子的一个快速示例.........如果该百分比超过某个阈值，它会调用一个回调来确定目标元素是否可见。 useIntersectionObserver提供使用 IntersectionObserver API 的简单语法。...这在处理位置或颜色时很有用。处理颜色的一个重要技巧是使用计算属性将 RGB 值格式化为正确的颜色语法。...另外如果你想加入前端、面试、理财等交流群，或者你有任何其他事情想和我交流也可以添加我的个人微信 ConardLi 。文中如有错误，欢迎在后台和我留言，如果这篇文章帮助到了你，欢迎点赞、在看和关注。

2K1 0

CSS笔记(15)

元素的显示与隐藏类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现....display隐藏元素后,不再占有原来的位置(和绝对定位一样的特征). 后面应用及其广泛,搭配JS可以做很多的网页特效....如果隐藏元素不想要原来的位置,就用display : none 原图隐藏后 3.overflow溢出 overflow属性指定了如果内容溢出一个元素的框(超出其高度及宽度)时,会发生什么....但是如果有定位的盒子,请慎用overflow:hidden.因为它会隐藏多余的部分....(我也不知道这里为什么用这个,我用的visibility发现也是一样的效果.)

1.1K1 0

❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️

有一个导航栏，其中对所有类别进行了排序。单击这些类别中的任何一个时。然后可以看到该类别中的所有作品，而隐藏其余作品。结果，用户可以轻松地找到他选择的图像。我首先在网页上创建了一个导航栏。...同样，当您单击另一个类别时，该类别的作品将被看到，其余的将被隐藏。我让它完全响应，以便它可以在所有设备上使用。...当你单击一个类别时，这些类别中的每一个都将与图像并排显示。例如，如果您单击具有四个图像的类别。第一行有两个图像，第二行有两个图像。...当您单击此类别时，该类别其余部分中的所有图像将被隐藏，所有四个图像将并排显示。以下代码已用于使此重定位更加生动。此处使用了 0.5 秒，这意味着更改该位置需要 0.5 秒。...，其他所有其他项目都将被隐藏。

6.5K2 0

CSS隐藏元素的几种方式

(经小伙伴评论提醒，后来加的内容) 回流：当我们修改元素的几何位置属性，如宽度、高度时，浏览器会重新布局，这个过程就叫回流重绘：当我们修改元素的绘制属性，如背景色、颜色等，浏览器不会重新布局，但是需要重新进入绘制阶段...答案是必然的，当我们修改display时，它会突然地出现或消失(即会修改元素的位置)，所以会引发回流，引发回流自然就会引发重绘。...定位法绝对定位法因为绝对定位可以让元素脱离标准流，所以只需要设置绝对定位，就可以让元素移出可视范围内，这样子就相当于隐藏了。...，所以会触发回流，但是让元素绝对定位后，再进行其他会导致回流的操作，就能减少回流代价。...降低层次法通过z-index来降低当前元素的层次，让其他元素遮盖该元素来实现隐藏。

2K2 0

送你43道JavaScript面试题

建议大家也花半个小时来做一做，以便查漏补缺。为方便大家能够更快的做题，而不把时间浪费在翻译上，我又花了几个小时把它们翻译成了中文，当然已经获得了作者授权。 ?...当我们在声明变量之前尝试访问变量时，JavaScript会抛出一个ReferenceError。...当我们使用方括号表示法时，它会看到第一个左括号[，然后继续，直到找到右括号]。只有在那个时候，它才会对这个语句求值。...当我们这样做时会发生什么? function bark() { console.log("Woof!")...}`; } 这样会使member.getFullName()是可用的，为什么样做是对的？

1.6K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭