开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用javascript在单击时仅激活div子类

在使用JavaScript实现在单击时仅激活div子类的功能时，可以通过以下步骤来实现：

首先，为需要单击激活的div元素添加一个点击事件监听器。
在点击事件处理函数中，使用JavaScript选择器获取所有的div子类元素。
遍历所有的div子类元素，将它们的样式设置为隐藏（display: none）。
将当前被点击的div元素的子类元素的样式设置为显示（display: block）。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .subdiv {
      display: none;
    }
  </style>
</head>
<body>
  <div id="parentDiv">
    <div class="subdiv">子类1</div>
    <div class="subdiv">子类2</div>
    <div class="subdiv">子类3</div>
  </div>

  <script>
    var parentDiv = document.getElementById("parentDiv");
    var subDivs = parentDiv.getElementsByClassName("subdiv");

    parentDiv.addEventListener("click", function() {
      for (var i = 0; i < subDivs.length; i++) {
        subDivs[i].style.display = "none";
      }

      event.target.getElementsByClassName("subdiv")[0].style.display = "block";
    });
  </script>
</body>
</html>

在上面的示例代码中，我们首先为父级div元素添加了一个点击事件监听器。当点击父级div元素时，会触发点击事件处理函数。在处理函数中，我们首先将所有的子类div元素的样式设置为隐藏（display: none），然后将当前被点击的div元素的子类元素的样式设置为显示（display: block）。

这样，当点击父级div元素时，只有被点击的div元素的子类元素会显示出来，其他子类元素会隐藏起来。

推荐的腾讯云相关产品：腾讯云云服务器（https://cloud.tencent.com/product/cvm）

相关搜索:javascript -单击按钮时复制div Javascript -在单击时设置div显示- ClassName未定义 Javascript-单击关闭按钮时如何显示div？Javascript在单击时仅填充画布的特定部分仅使用javascript动态添加div 仅使用JavaScript单击按钮时，如何聚焦输入内容仅当单击div文本而不是整个div时，Href才有效仅当在JavaScript中单击按钮时才激活预加载器使用Javascript在单击时显示div 使用jQuery在单击标签时隐藏某个div

相关搜索:

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

有帮助

没帮助

相关·内容

JQuery事件处理

Jquery事件 1、绑定事件示例代码：绑定事件

什么是绑定事件？这是隐藏的内容，点击上面的内容会显示这里的内容。

<script language=”javascript”> //单击显示，再次点击隐藏 /*$(function(){ $(“a”).bind(‘click’,function(){ if($(this).next().is(“:visible”)){ $(this).next().h

05

前端如何提高用户体验：增强可点击区域的大小

你是否曾经试着点击或点击一个元素(例如:按钮、链接)，并且注意到只有单击该元素的特定区域，它才会响应？

02

给用户一个否减弱动画效果的选择[每日前端夜话0x8B]

你有没有看到过这样一种简洁的技术【http://bradfrost.com/blog/post/reducing-motion-with-the-picture-element/】，它基于 prefers-reduced-motion 媒体查询，将 <source media=""> 用于 <picture> 元素来提供动图（或不提供动图）？

05

浅析 JavaScript 中的事件委托

为了实现这个小功能，你需要选择按钮，然后再用 addEventListener() 方法来附加事件监听器：

03

怎样为你的 Vue.js 单页应用提速

我有一个项目用了 Vue.js 来构建单页应用程序。随着上线日期的临近，性能优化的工作变得越来越重要。在本文中，我收集了有关在加载时间和渲染性能方面提高 Vue.js 应用性能的所有知识。

01

人工智能|基于 TensorFlow.js 的迁移学习图像分类器

TensorFlow.js是一个基于deeplearn.js构建的强大而灵活的Javascript机器学习库，它可直接在浏览器上创建深度学习模块。使用它可以在浏览器上创建CNN(卷积神经网络)、RNN(循环神经网络)等等，且可以使用终端的GPU处理能力训练这些模型。接下来我们将学习如何建立一个简单的“可学习机器”——基于 TensorFlow.js 的迁移学习图像分类器。

04

Jump Start Bootstrap 第4章

JavaScript是网页上事实上的脚本语言。流行的网页功能，例如：漂亮的图片幻灯片、下拉菜单、弹出框等，都可以结合JavaScript和CSS实现。在这章，我们将讨论一些Bootstrap 3 提供的随时可用的JavaScript插件，很容易创建一些高级的网页功能。

04

ArcGIS API for JavaScript应用开发

ArcGIS API for JavaScript 提供在线版API，4.x 是 ArcGIS API for JavaScript 的新一代版本，实现了2D和3D应用的完全集成，3.x是一个2D版本，编程思路差异还是比较大的。开发调试过程中，最好进行本地化部署。ArcGIS JavaScript API可以从Esri官网获取，需要先注册一个Esri全球账户。SDK本地化部署指在本地Web Server上的部署，在API文件夹arcgis_js_api\library\3.18\install_win.html中有官方的部署文档，基本过程如下：

03

Python爬虫基础：常用HTML标签和Javascript入门

大部分HTML标签是闭合的，由开始标签和结束标签构成，二者之间是要显示的内容，例如：<title>网页标题</title>。也有的HTML标签是没有结束标签的，例如：
和

01

jquery 事件冒泡、阻止事件冒泡 - event.stopPropagation()

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

04

【译】用纯JavaScript写一个简单的MVC App

我想使用model-view-controller体系结构模式并用纯JavaScript编写一个简单的应用程序。所以我着手做了，下面就是。希望能帮你理解MVC，因为这是一个很难理解的概念，刚接触时候会很疑惑。

01

Jquery 事件冒泡

什么是JS事件冒泡？：在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。（摘自网络）如何来阻止Jquery事件冒泡？通过一个小例子来解释 <%@ Page Language="C#" AutoEventW

07

3 个 React 状态管理的规则

React 组件内部的状态是在渲染过程之间保持不变的封装数据。useState() 是 React hook，负责管理功能组件内部的状态。

00

跨站脚本（XSS）备忘录-2019版

这是一份跨站脚本（XSS）备忘录，收集了大量的XSS攻击向量，包含了各种事件处理、通讯协议、特殊属性、限制字符、编码方式、沙箱逃逸等技巧，可以帮助渗透测试人员绕过WAF和过滤机制。

01

WebDriverIO教程：处理Selenium中的警报和覆盖

在此有关Selenium中警报处理的WebDriverIO教程中，我将向您展示如何在WebDriverIO中处理警报和弹出窗口以及叠加模式。我还将介绍自动化期间将要遇到的各种类型的警报，以及使用WebDriverIO在Selenium中处理警报时需要遵循的关键点。

01

第51次文章：JQuery高级

上周我们聊了一下jQuery的基础部分，这周我们把jQuery的高级部分学习一下吧！同时也预祝各位小伙伴新年快乐!

03

Vue SSR

vue.js是构建客户端应用程序的框架，在默认情况下，在浏览器输出Vue组件，进行生成DOM和操作DOM。Vue SSR 就是实现将组件渲染为服务器端的HTML字符串，将他们直接发送给浏览器，最后将这些静态标记“激活”为客户端可应用的应用程序。

01

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

D.closest()获得D所有父元素,含自己（D、B、A）与 D.parents() 对比

02

Vue 3 事件处理

页面上会有很多的页面交互，例如用户点击按钮，会触发什么样的事件，这个事件要做什么事情，就会涉及到事件处理。

02

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

【注意】：如果遍历中加判断条件，当前function返回为false，则结束循环(相当于js中使用的break)，如果返回为true，则结束本次循环，继续下次循环(相当于js中使用的continue)；

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭