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

如果我单击任何子项,如何在顶部li上设置活动类

在前端开发中,可以通过以下步骤来实现在顶部li上设置活动类:

  1. 首先,给每个子项添加一个点击事件监听器,当子项被点击时触发该事件。
  2. 在点击事件的处理函数中,首先移除当前具有活动类的li元素上的活动类,然后将活动类添加到被点击的子项所在的li元素上。

以下是一个示例代码:

HTML部分:

代码语言:txt
复制
<ul id="menu">
  <li class="active">子项1</li>
  <li>子项2</li>
  <li>子项3</li>
</ul>

JavaScript部分:

代码语言:txt
复制
// 获取所有li元素
var menuItems = document.querySelectorAll('#menu li');

// 遍历每个子项,为其添加点击事件监听器
menuItems.forEach(function(item) {
  item.addEventListener('click', function() {
    // 移除当前具有活动类的li元素上的活动类
    var currentActiveItem = document.querySelector('#menu li.active');
    currentActiveItem.classList.remove('active');
    
    // 将活动类添加到被点击的子项所在的li元素上
    item.classList.add('active');
  });
});

在上述示例中,我们首先通过querySelectorAll方法获取了所有的li元素,并使用forEach方法遍历每个子项。然后,为每个子项添加了一个点击事件监听器,当子项被点击时,会触发点击事件的处理函数。在处理函数中,我们首先通过querySelector方法获取当前具有活动类的li元素,并使用classList.remove方法移除其上的活动类。然后,使用classList.add方法将活动类添加到被点击的子项所在的li元素上。

请注意,上述示例中的活动类名为"active",你可以根据实际需求自定义活动类名。

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

相关·内容

10分钟内就可以学会的几个CSS高招

CSS 中与布局和位置相关的所有内容都受框模型的影响,如果你打开 chrome 开发工具,你可以看到如何在页面上的任何元素计算框模型。 ?...Grid 允许你考虑大图布局,当你将元素设置为显示网格时,它对开发人员更加友好,你可以将其子项定义为一堆列和行。 ? 列的宽度可以用网格模板列属性定义,我们在这里有三个值: ?...7、 变量的变量 注意我们如何在多个地方使用相同的颜色值,如果我们决定更改颜色,我们需要修改引用它的每一行代码,更好的方法是在根选择器定义一个全局变量。 ?...现在,你很可能熟悉,当你进入表单输入或单击按钮时应用于元素的焦点伪。 ? 问题在于构建下拉菜单时,你可能会使用焦点打开菜单,但是当你单击该菜单内的某些内容时,它会失去焦点并关闭。...如果任何孩子也有焦点,它就会保持活动状态,并且一个简单的功能可以消除许多用于切换状态的 JavaScript。 这些方法可以让你的 CSS 代码更简洁。 ?

1.4K20

【CSS】253- 从原型图到成品:步步深入 CSS 布局

把左侧元素包进一个 div,并给元素们设置名,便于应用 CSS 选择器。...我们用选择器锁定了所有名为 tweet 的元素。当然目前只有一个这样的元素,但如果有十个,那它们将都会是 Flex 容器了。 CSS 中以 . 开头的选择器代表选择器。为什么是 .?可不知道。...事实,CSS 是以倒序读取选择器的。其过程是 “先找到页面中所有的 li,然后在这些 li 中找到名是 actions 的那些”。但无论你用正序还是倒序的方式去理解,结果都是一样的。...一种就是设置 Flex 子项的对齐方式。你应该对设置对齐方式很熟悉,每个富文本编辑器顶部都有这种功能的按钮: ? 它们把文本进行左对齐、居中对齐、右对齐以及 “两端对齐”,也就是铺满整行。...可以给 content 属性赋值任何文字内容,包括 Unicode 字符。你可以恣意发挥,像给任何其他元素设置样式一样。伪元素用来实现标记(badge)、消息提醒或其他小花样最合适不过了。

4.4K51
  • waypoint_使用jQuery Waypoint创建粘性导航标题

    您所见,它非常简单,但提供了很大的灵活性-您可以在其主页查看几个示例 。 在页面中包含jQuery和Waypoint,让我们开始吧!...如果我们向下滚动,则航路点所属的部分与变为活动状态的部分相同。 但是,向上滚动经过一个航路点就意味着它是前面的部分,因此我们使用.prev()进行选择。...然后,我们将selected从导航栏中的所有链接中删除,然后将其重新应用到其href属性与当前活动部分的id对应的。 这工作得很好。...如果您不仅仅想添加和删除,还可以考虑使用LavaLamp这样的插件。 在某些时候,您可能已经注意到,单击导航栏中的链接会将部分的顶部置于浏览器视口的顶部。...希望能早晚在这里或在Nettuts +以快速提示的形式向您显示。 敬请关注!

    3.3K30

    微信小程序实践:2.3 可滚动的容器组件之 scroll-view

    7,如何在scroll-view中自定义实现一个下拉刷新交互动画? 8,使用scroll-view实现瀑布流功能时,如果页面比较卡顿,可以朝哪个方向优化?...10,在一些购物类或订餐小程序中,左侧有物品分类,左侧是物品列表,单击分类,右侧自动滚动到相关位置,右侧列表上下滚动,左侧分类菜单自动切换,获得高亮焦点,这样的功能是怎么实现的?...但是在WXS中,如果我们使用let声明变量的话,微信开发者工具立刻就给我们爆出一个奇怪的bug。 此时代码错乱,无法执行。编辑器会报一个没有什么任何文本提示的错误。...举个例子,ul的li默认是以上而下换行显示的,如果给ul添加display:inline-block,所有li会排行成一行。...在顶部自定义一个navigatorBar导航栏,单击一个按钮切换到一个页面,每个页面都是一个独立的scroll-view组件。

    14.9K30

    浅析AndroidStudio3.0最新 Android Profiler分析器(cpu memory network 分析器)

    要了解有关事件时间轴的更多信息,包括如何启用它,请阅读一篇文章说到的启用高级分析 ②CPU timeline: 显示您的应用程序的实时CPU使用率(占总可用CPU的百分比)以及应用程序使用的线程总数...绿色: 线程处于活动状态或准备好使用CPU。也就是说,它处于”运行”或”可运行”状态。 黄色: 线程处于活动状态,但是在完成其工作之前,它正在等待I / O操作(文件或网络I / O)。...您可以检查每个节点,以确定哪些调用者在调用这些方法花费最多的CPU时间。与上面的树相比,底部树中每个方法的定时信息都是在每棵树的顶部(顶部节点)的方法。...为了帮助查找已知,请单击名列标题以按字母顺序排序。然后单击名。实例视图窗格出现在右边,显示该类的每个实例,如下图所示。 在Instance View窗格中,单击一个实例。...3.2 网络分析器概述 在窗口的顶部,您可以看到事件时间线和①无线电电源状态(high/low)和wi-fi。在时间轴,您可以单击和拖动来选择②时间轴的一部分来检查流量。

    3.2K10

    如何移除或禁用 Ubuntu Dock

    但是如果你需要,还是有几种方法来摆脱它的。下面将列出 4 种方法可以移除或禁用 Ubuntu Dock,以及每个方法的缺点(如果有的话),还有如何撤销每个方法的更改。...如何在没有 Ubuntu Dock 的情况下访问活动概览 如果没有 Ubuntu Dock,你可能无法访问活动的或已安装的应用程序列表(可以通过单击 Dock 底部的“显示应用程序”按钮从 Ubuntu...根据你计划用来替代 Ubuntu Dock 的软件,如果无法访问活动概览,那么你可以启用“活动概览热角”选项,只需将鼠标移动到屏幕的左上角即可打开活动概览。...此外,默认情况下将禁用 AppIndicators 扩展(因此使用 AppIndicators 托盘的应用程序不会显示在顶部面板),但你可以使用 Gnome Tweaks 启用此功能(在扩展中,启用...在登录屏幕单击用户名,单击 “Sign in” 按钮旁边的齿轮图标,然后选择 “GNOME” 而不是 “Ubuntu”,之后继续登录。

    6.5K10

    一篇文章带你了解CSS Pseudo-classes(伪 )

    CSS伪允许设置元素的动态状态的样式,例如悬停,活动状态和焦点状态,以及文档树中现有但不能通过使用其他选择器作为目标的元素,而无需添加任何选择器它们的ID或。 例如,针对第一个或最后一个子元素。...这些伪使可以对未访问的链接进行样式化,而对访问的链接进行样式化。最常见的样式设置技术是从访问的链接中删除下划线。 例 <!...这些伪更改了响应用户操作呈现链接的方式。 : hover 当可被用于在用户将鼠标悬停在按钮时改变按钮的颜色用。 : active 当元素被激活或单击时适用。...ol li:first-child在下面的示例中,选择器选择一个有序列表的第一个列表项,并从其顶部删除边框。... : lang伪 语言伪:lang允许根据特定标记的语言设置来构造选择器。 :lang以下示例中的伪为明确赋予语言值的元素定义了引号no。 例 <!

    2K10

    关于“Python”的核心知识点整理大全60

    在本书的最后一章,我们 将设置这个项目的样式,使其更漂亮;我们还将把它部署到一台服务器,让任何人都可通过互 联网注册并创建账户。...请在settings.py的末尾添加如下代码: settings.py --snip-- # 设置 LOGIN_URL = '/users/login/' # django-bootstrap3...20.1.2 使用 Bootstrap 来设置项目“学习笔记”的样式 Bootstrap基本就是一个大型的样式设置工具集,它还提供了大量的模板,你可将它们应用 于项目以创建独特的总体风格。...接下来的标签启用你可能在页面中使用的所有交互式行为,可折叠的导航 栏。7处为结束标签。 2....如果用户单击这个按钮,将出现一个下拉列表,其中包含所有的导航元素。在用户缩小 浏览器窗口或在屏幕较小的移动设备显示网站时,collapse会使导航栏折叠起来。

    12710

    Framer 使用滚动变体创建动画

    “滚动变体”(Scroll Variants) 允许您在页面上进入视口的部分更改组件的活动变体。...并且将我们刚刚创建的组件导入进来, 然后设置固定(fixed)定位,宽度为100%. 组件创建之后会存在于Assets 里面,我们直接从里面拖入页面即可导入....单击组件, 点击左侧属性栏的Effect ==> 点击+号 添加scroll variant 编辑 给每个页面加入了Scroll Section Name(这也在左侧属性面板,往下面划划就看到了).这方便我们用来控制当...触发的时机呢,就是ViewPort, 视口的顶部,中部,底部到达浏览器窗口的顶部 触发次数: 重复重复,即滚动下去触发一次, 滚动上去也依然会触发一次. To状态,组件的变化....Demo2: 实现一个滚动到不同部分,更改左侧的icon图标 效果: 在上个效果的基础,添加了 渐变背景 填充了文本,并使用绝对定位固定到页面上. 给每个页面添加了 粘性布局, 达到视差的效果.

    6810

    自定义Linux桌面,还有这么多玩法?

    在这里使用了Ubuntu,但是这些步骤应该适用于使用GNOME桌面环境的任何Linux发行版。...GNOME Tweak工具使您可以进行许多设置更改。其中的某些更改(例如墙纸更改,启动应用程序等)也可以在官方的“系统设置”工具中找到。将把重点放在介绍默认设置中不可用的调整。...如果您在笔记本电脑快速键入,这将很有用。手掌底部可能会触摸触摸板,并且光标会移至屏幕不需要的位置。 键入时自动禁用触摸板可解决此问题。 ?...触摸板其实是没有问题的,这是一项系统设置,可对没有真正右键单击按钮的任何触摸板(例如旧的Thinkpad笔记本电脑)禁用这种右键单击功能。两指点击可为您提供右键单击。...您具有日历、网络图标、系统设置和“活动”选项。 您还可以显示电池百分比、添加日期、日期和时间以及显示星期数。您还可以启用热点,以便将鼠标移至屏幕的左上角,然后获得所有正在运行的应用程序的活动视图。

    2.8K10

    使用SMM监控Kafka集群

    一篇初识Streams Messaging Manager之后。我们开始逐渐介绍使用SMM的用例。...查看页面顶部的生产者、Broker、Topic和消费者组信息,以了解您的Kafka集群中包含多少个。 ? 您可以单击任何框中的下拉箭头以查看Kafka资源列表。...在“生产者”页面上,消极生产者称为非活动生产者。 您可以在Streams Messaging Manager的“配置”屏幕中设置将生产者视为不活动的时间。 1....• 如何看待本Topic的保留率? • 如何查看此Topic的复制因子? • 如何看到与此Topic相关的生产者和消费者? • 如何在指定的时间范围内找到进入该Topic的消息总数?...此页面可帮助您回答以下问题: • 的Broker位于什么主机上? • 的Broker是否磁盘空间不足? 要访问详细的Broker信息: 1. 在左侧导航窗格中,单击Brokers。 2.

    1.6K10

    使用GNOME Tweaks工具定制Linux桌面的10种方法

    在这里使用过Ubuntu,但是这些步骤应该适用于使用GNOME桌面环境的任何Linux发行版。...如果您在笔记本电脑快速输入,这将很有用。手掌底部可能会触摸触摸板,并且光标会移至屏幕不需要的位置。 您还会注意到,当您按下触摸板的右下角以进行右键单击时,什么也没有发生。触摸板没有错。...这是一项系统设置,可对没有真正右键单击按钮的任何触摸板(例如旧的Thinkpad笔记本电脑)禁用这种右键单击功能。两指点击可为您提供右键单击。...你也可以通过在“模拟鼠标单击”下设置为“区域”中而不是“手指”来找回这项功能。 您可能必须重新启动Ubuntu才能生效。如果您是Emacs爱好者,还可以从Emacs强制进行键盘绑定。...您还可以启用热点,以便将鼠标移至屏幕的左上角,并获得所有正在运行的应用程序的活动视图。 如果将鼠标放在应用程序窗口上,则会注意到其菜单显示在顶部面板中。

    4.6K00

    在Excel中制作甘特图,超简单

    /减少项目任务 什么是甘特图 甘特图是项目任务与时间的图形表示,其中活动在纵轴或y轴用水平线或横条表示,而时间沿着水平轴或x轴。...如果想保持数据区域格式不变,就可以这样做。 步骤4:单击选择第一个系列,即示例中的蓝色系列。选取“格式”选项卡中的“形状填充——无填充颜色”。...双击包含任务名称的垂直坐标轴,在右侧“设置坐标轴格式”任务窗格中,选取“坐标轴选项”栏中的“逆序类别”。 图5 步骤6:双击图表顶部的日期轴,并将“边界”的最小值设置为43337。...图6 步骤7:如果希望将日期轴保持在顶部,则可以跳过此步骤。但是,如果希望将日期轴放置在底部,则在“设置坐标轴格式”中将“标签位置”设置为“高”。...设置系列的分类间距,并重新填充颜色,使其更清晰。 图8 从动态Excel甘特图中添加/减少活动/任务 现在,如果想添加另一项任务,非常简单。

    7.7K30

    【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )

    一、横向导航栏实现核心要点 需求 : 实现如下布局 ; 一篇博客中 , 已经实现了顶部的搜索栏 , 本篇博客开始实现后续部分 ; 1、固定定位下面的布局设置 在上一篇博客中实现的搜索栏 , 使用...固定定位 设置该搜索栏位置 , 不管网页如何滚动 , 最上方始终显示该搜索栏 ; 搜索栏下方的 Banner 轮播图 , 如果以 标准流 显示 , 会被 搜索栏 覆盖 , 此处为 Banner 轮播图设置一个外边距..., 避免显示在搜索栏下方 ; .banner { /* 上面的搜索栏是固定定位的 如果使用默认设置 该 Banner 栏会被搜索栏盖住 因此这里设置一个 44 像素的外边距 *...; 将父容器设置为 Flex 弹性布局 , 同时为子项设置 flex: 1; 样式 , 这样 5 个子项目平均分配整个宽度尺寸 ; 样式代码 : /* 横向导航栏样式 */ .local-nav.../* 上面的搜索栏是固定定位的 如果使用默认设置 该 Banner 栏会被搜索栏盖住 因此这里设置一个 44 像素的外边距 */ padding-top: 44px; }

    50020

    Imooc之Html与CSS

    如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件(就自动选中和该label标签相关连的表单控件)。...,如下: 胆小鼠 第二步:使用class=”选择器名称”为标签设置一个,如下: 胆小鼠 第三步:设置选器...要变成内联元素 内联元素特点: 和其他元素都在一行; 元素的高度、宽度及顶部和底部边距不可设置; 元素的宽度就是它包含的文字或图片的宽度,不可改变。...如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件(就自动选中和该label标签相关连的表单控件)。...设置a{display:block;} 内联元素 内联元素特点: 1、和其他元素都在一行; 2、元素的高度、宽度及顶部和底部边距不可设置; 3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

    6.8K20

    何在 Photoshop 中制作 GIF 动画

    在本教程中,将向您展示如何在 Photoshop 中从头开始创建矢量 GIF。例如,要制作一个圆形动画。同样的方法可以用来创建任何形状。让我们开始步骤吧!第 1 步:创建一个新文档。...第3步: 复制图层,然后单击眼睛图标隐藏原始图层(椭圆1)。第四步:从工具栏中选择钢笔工具,转到顶部菜单,然后选择减去正面形状。使用钢笔工具在圆上画一个三角形,就像切蛋糕一样。...步骤 8:单击“时间轴”面板的加号图标添加新帧。选择第一帧并打开第一层(红色圆圈)。选择第二帧并打开第二层(第一个三角形剪切),对所有帧重复此步骤。注意:一次只能打开一层。...单击播放按钮查看其外观并进行相应调整。如果您对结果感到满意,请转至顶部菜单“文件” > “导出” > “另存为 Web(旧版)”来保存 GIF。您应该看到这个窗口。...将预设更改为 GIF 选项,然后单击“保存”。现在您可以为其命名、选择保存位置以及格式等其他设置。第 9 步:点击并保存按钮,恭喜您,您已经创建了一个 gif 动画!

    43830

    何在CentOS 7使用InfluxDB分析系统指标

    在本指南中,我们将介绍: 如何在CentOS 7安装和配置InfluxDB。 如何将系统监视数据从collectd系统统计守护进程提供给InfluxDB。...第4步 - 创建数据库 当InfluxDB首次设置时,它不包含任何实际的数据库,因此我们需要创建一个数据库,我们最终将用它来存储我们的指标。 单击Web UI顶部菜单中的“ 数据库”菜单。...sudo nano /etc/collectd.conf 主要的collectd配置文件包含许多设置,其中大多数设置默认情况下不处于活动状态,因为它们已被注释掉。我们将取消注释并修改其中一些。...如果文件中发现任何错误,它们将列在终端中。 配置无错误后,重新启动collectd以激活新配置。这可能需要一些时间。...单击顶部标题中的“ 主页”链接以显示仪表板列表屏幕。在此屏幕的底部,单击+新建。这将带您进入新的空白仪表板。 单击仪表板标题菜单中的齿轮,然后单击设置”。

    3.4K10

    何在Mac卸载Steam

    通过Steam应用删除游戏的方法如下: 在Mac启动Steam,并确保您已登录帐户。 单击顶部的“库”选项。 展开全部左侧查看所有游戏,然后单击您想要从你的Mac卸载游戏。...如何在Mac卸载Steam 如果你不想再使用Steam或它的任何游戏,就像从Mac删除任何其他应用程序一样删除Steam应用程序。 这将删除Steam,与之关联的所有数据以及所有下载的游戏。...1.从Mac删除Steam应用 您需要做的第一件事是从Mac删除Steam应用程序: 如果Steam已打开,请通过单击顶部的Steam -> 退出Steam选项将其关闭。...如何在没有Steam的Mac卸载Steam游戏 如果您或其他人已经在Mac卸载了Steam,但游戏仍然存在,该怎么办?没有Steam可以卸载Steam游戏吗? 幸运的是,有。...只需在Mac卸载Steam并不会删除您的Steam帐户。要使用此服务删除帐户,需要执行一个帐户删除过程。 与大多数其他帐户删除方法不同,您不能简单地进入帐户设置单击一个选项来删除帐户。

    10.1K51

    Jump Start Bootstrap 第4章

    在这代码中,使用btn、btn-lg、btn-default创建了一个大的灰色按钮,它正好处于inactive状态,当我们点击它,Bootstrap将在按钮添加active。...添加data-dismiss使按钮在单击时关闭模式对话框。 对于本体,我们需要一个包含modal-body的元素。您可以将几乎任何内容放到该元素中。...它可以放在文档的任何位置。 Modals有三个宽度:大的,默认的,小的。这些对于在模式对话框中适当地填充内容非常有帮助。如果没有为modal-dialog元素提供额外的,它的默认宽度是600px。...当设置为true时,模式对话框将自动显示,不需要单击任何句柄元素。 元素,可以作为一个modal handle元素,可以包含一个包含链接的属性href。...如果您想要使用该特性并加载modal内的链接,则将remote属性设置为true。

    28.3K40
    领券