有多个li标签,每点击一个li标签改变被点击li标签的背景,并且获取改li标签中的数据

2023-11-15

由于在做如下页面的布局时,采用了多个li标签来展现,需要达到的效果是:

1、每点击一个选项卡,该选项卡的背景颜色改变,再点击一次就变回本来的颜色

2、支持多选,并且把选中的选项卡数据存入数组

主要用到的方法就是,取到所有的li标签进行循环添加点击事件,给当前点击的li标签添加一个className,给该className设置背景样式,但是由于本来的li标签有多个className,需要取到添加的className,对其进行判断,代码如下:

var Oli= document.querySelectorAll('#topPopover li');  //取到所有的li标签
var liList=[];                   //定义一个数组
for( var i=0 ;i<Oli.length;i++){	
    Oli[i].onclick=function(){
		this.classList.toggle('tog');     //添加一个classNmae,并在css中设置样式
		console.log(this.className);      //打印出当前点击li标签的所有className
		var str=this.className.split(" ")[2];	// 取出添加的className					
		if(str=='tog'){
			liList.push(this.innerText);		
		}else{
			liList.pop(this.innerText);
		}
		
	}		
}

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

有多个li标签,每点击一个li标签改变被点击li标签的背景,并且获取改li标签中的数据 的相关文章

  • 如何正确地将节点从引用传递到上下文?

    我正在尝试将节点从引用传递到上下文 但是因为我在第一次渲染后没有重新渲染 所以传递的节 点是null 我考虑了两种变体 但我认为它们不是最好的 To pass ref代替ref current 但在用例中 我将被迫使用类似的东西contex
  • 用更好的模式替换开关(Javascript)

    我必须升级我的应用程序以根据用户类型和角色属性显示页面 目前 我使用一个简单的 switch 语句来根据用户类型来执行此操作 例如 switch type case a return CONSTANT ONE case b return C
  • 在 PhoneGap 应用程序中打开用 HTML 和 CSS 制作的 PDF

    我的 iPad 应用程序在 Phone Gap 中遇到一个奇怪的问题 问题是我必须通过链接在我的应用程序中打开 PDF 文档 当我单击打开 PDF 的链接时 它会向我显示没有反向链接的 PDF 文档 因此 当我通过链接在应用程序中打开 PD
  • 如何使用 Nextjs/React 将 JSON 对象导出到 Excel?

    我有一个检索 json 对象的端点 如下所示 data id 1 temaIndicador Indian codigo 001 observaciones Interactions Specialist tertiary Regional
  • 为什么内部 DIV 会溢出到外部 DIV 之外?

    我已经远离 HTML 和 CSS 很久了 找不到这个简单问题的解决方案 我有一个 div 位于另一个 div 中 外层黑色 内层橙色 我的 HTML 和 CSS 是 outer position fixed width 30 height
  • 为某个时刻添加持续时间 (moment.js)

    时刻版本 2 0 0 阅读文档后 http momentjs com docs manipulating add 我认为这很简单 Chrome 控制台 var timestring1 2013 05 09T00 00 00Z var tim
  • document.write 在同一页面上显示内容。

    我对 javascript document write 方法有疑问 大多数情况下 当我使用 document write 时 它会向我显示在不同页面中使用该方法编写的内容 例如 如果我写这样的命令 document write Hello
  • 为什么这个递归函数返回未定义?

    我正在尝试编写一个使用递归组合两个字符串的函数 我的代码如下 但我不知道为什么该函数返回未定义 特别是当我在基本情况下使用 console log 时 它不会打印未定义而是打印正确的值 var str3 function merge str
  • 等待异步 grunt 任务完成

    我收到了 grunt 设置 其中一个新任务应该执行 grunt task run 已经存在的任务 要执行的任务是异步的 新任务应该等待异步任务完成 执行此操作的首选方法是什么 grunt 已经涵盖了这一点 你应该将你的任务声明为异步任务 并
  • 文件缓存:查询字符串与上次修改时间?

    我正在研究缓存网站资源的方法 并注意到大多数与我类似的网站都使用查询字符串来覆盖缓存 例如 css style css v 124942823 后来 我注意到每当我保存 style css 文件时 最后修改的标头都会 更新 使得查询字符串变
  • 为什么浏览器允许onmousedown JS改变href?

    我很长时间以来都注意到 当您尝试复制链接位置或在 Facebook 上打开链接时 它会修改链接并将其传递给l php 例如 我可以被发送到 http www facebook com l php u http 3A 2F 2Fwww goo
  • 如何在数据表角度中基于 JSON 动态填充表值?

    我在用着Angular 数据表 https l lin github io angular datatables 我需要能够根据返回的数据动态创建表 换句话说 我不想指定列标题 Example json数据 id 2 city Baltim
  • 仅使用 HTML 和 CSS 制作弧形帆形状?

    是否可以仅使用 HTML 和 CSS 创建下面的弧形帆形状 我可以看到从这个答案 https stackoverflow com questions 7073484 how does this css triangle shape work
  • 如何让php页面从html页面接收ajax post

    我有一个非常简单的表单 其中有一个名字输入字段 我捕获了表单数据 并使用标准 jQuery 发布方法通过 ajax 将其传输到 PHP 页面 但是 我根本无法从 PHP 页面获得任何在服务器端捕获数据的响应 我不确定我做错了什么或缺少什么
  • 粘性背景图像/使用 CSS

    我目前正在创建我的第一个网站 并且即将完成 我在标题下为主体使用背景图像 我发现每个页面都有一个问题 因为它们的高度都不同 这使得我背景图像的当前设置放大图片以适合整个页面 我想做的是将背景图像设置为 粘性 我的想法是 背景图像将直接位于标
  • 如何禁用网页中的萤火虫?

    如何使用 Javascript 禁用 firebug 我想这样做是为了向访问者隐藏我的网页的运作方式 有什么选择可以做到这一点吗 你不能 你能做的最好的事情就是混淆你的 JavaScript 实际上刮掉了 您能做的最好的事情就是将所有安全关
  • 如何计算一行中Flexbox项目的数量?

    网格是使用 CSS flexbox 实现的 Example http jsbin com jumosicasi edit html css js output 本示例中的行数为 4 因为我出于演示目的固定了容器宽度 但是 实际上 它可以根据
  • 拉斐尔路径交叉点不起作用

    我对拉斐尔和 pathIntersection method JSFiddle 示例 http jsfiddle net t6gWt 2 您可以看到有两条线都与曲线相交 但当我使用 pathIntersection method 有一个未解
  • 在引导程序中以编程方式更改选项卡窗格选项卡

    我使用的选项卡窗格定义为 ul class nav nav tabs li a href personal Personal Information a li li class active a href contact Contact a
  • jQuery appendTo(), json 在 IE 6,7,8 中不起作用

    我这两天绞尽脑汁想找到解决办法 我使用 jQuery ajax 从数据库中获取值 以便在另一个框发生更改时更新一个框 php 脚本从数据库中获取值 然后输出 json 它在 FF 中工作正常 但在所有版本的 IE 中 选择框都不会更新 我已

随机推荐

  • 对存储过程进行加密和解密(SQL 2008/SQL 2012)

    开始 在网络上 看到有SQL Server 2000和SQL Server 2005 的存储过程加密和解密的方法 后来分析了其中的代码 发现它们的原理都是一样的 后来自己根据实际的应用环境 编写了两个存储过程 一个加密存储过程 sp Enc
  • 方法

    方法 方法定义 调用 方法完整的定义形式 方法的其他定义形式 方法使用的常见问题 方法案例 方法调用的内存图 方法的参数传递机制 方法的参数传递案例 方法重载 单独使用return关键字 1 方法概述 1 1 方法的概念 方法 method
  • 解决elementUI中el-select组件的选中不显示问题

    el select组件选中不显示的原因好像只出现在多级联动中 并且选中是有值的 只是单纯的不回显 可以在el select中加入change事件 然后使用vue的set方法将值重新修改进去
  • react修改node_modules里的文件

    一 node modules里的文件可以使用patch package来修改 安装patch package yarn add patch package 修改package json 新增命令postinstall scripts pos
  • 超详细maven的卸载、重新安装与配置

    一 maven的卸载 maven在使用时只是配置了环境变量和本地仓库 我们只需要删除本地仓库 在环境变量中移除maven的环境变量 1 删除解压的maven文件夹 在之前的安装中 我将本地仓库和maven解压后的文件放在同一个文件夹下 此时
  • Java 高级语法学习笔记(基础)

    目录 反射机制 Class 类 类初始化 类加载 类的生命周期 七大阶段 1 加载 接入 class文件 2 验证 连接 linking 的第一阶段 为了安全 3 准备 分配内存及初步初始化 4 解析 字符翻译成引用阶段 5 初始化 代码正
  • 某在线学习平台《数据挖掘》第六章课后习题

    本文章系本人结合讲义及网上学习资料整理 难免存在个别问题 仅供各位同学和爱好者参考和讨论 发现问题请各位码友留言勘误 谢谢 1 下列几种数据挖掘功能中被广泛的用于购物篮分析的是 AA 关联分析 B B 分类和预测 CC 聚类分析 DD 演变
  • AD Ldap pwdLastSet不能更新到指定日期

    由于网上资料实在有限 特此记录 The only values that can be set are 0 To set User Must Change Password at Next Logon set the pwdLastSet
  • JAVA--文档注释

    文档注释是如何生成 JDK中包含javadoc工具 可以将文档注释由源文件中生成一个HTML文档 方便记录程序信息 文档注释格式 由 开始 结束 其中 中内容以自由文本格式 开头 文档注释的位置 在描述的类 接口 方法 构造器 成员字段前面
  • 苹果macOS13Ventura更新体验:新功能带来的全新体验

    macOS 13 Ventura 是一款功能强大 界面美观的操作系统 它为用户提供了更好的使用体验 加强了与其他设备的互联互通 提高了隐私和安全性 无论是日常办公还是娱乐 macOS 13 Ventura 都能满足用户的需求 并带来更多的便
  • win10控制面板快捷键_Win10开启最强隐藏模式,电脑性能直线飙升

    电脑的处理器 显卡等重要配置不停的在辞旧迎新 更新换代 很多人为了追求更好的性能 也愿意花高价钱买高配置的电脑 要提升电脑性能 硬件设备必然是主导地位 但不是人人都这么富裕买得起的 按小高个人的理解不管设备多先进或多陈旧 能满足我们的需求够
  • python入门:浅谈python中的数据类型

    数据类型 数据类型 1 变量 2 字符串 1 字符串的命名规则 2 字符串的加法运算 3 整数 3 浮点数 4 type 函数 5 强制转换 数据类型 1 变量 先看下面的代码 print 我是最可爱的人 print 我是最可爱的人 pri
  • 微信支付, 小程序,公众号, 商户号 需要进行的配置

    目录 一 微信公众号 1 1 公众号基础信息配置 1 2 白名单配置 1 3 公众号开发人员配置 1 4 域名授权配置 1 5 服务器配置 二 微信小程序 2 1 开发设置 2 2 域名设置 2 3 开发者管理 2 4 版本管理 三 微信商
  • 移植QT到QNX,QNX开发QT程序,QT图形开发环境搭建

    锋影 e mail 174176320 qq com 根据QT主页上提供的参数 修改4个地方 configure opensource confirm license qpa iconv shared release xplatform b
  • leetcode笔记:26.删除排序数组中的重复项

    package com ko leetcode primaryAlgorithm array 初级算法 数组 1 删除排序数组中的重复项 Author ko Date 2023 6 1 23 55 Version 1 0 public cl
  • Mysql编码问题的折中方案

    在mysql 5 7 26 0ubuntu0 16 04 1 中尝试修改my cnf无果 采用暂时修改编码的方式 设置MySQL变量 set character set database utf8 set character set ser
  • esp01s如何烧录、接线///arduino串口想输出字符串,但是输出了数字

    esp01s与usb转ttl接线 esp01s 连线 usb转ttl 3V3 3V3 GND GND RX TXD TX RXD IO0 GND IO0接地作用是 进入烧录模式 IO0接地之后需要断电 重新上电 完成烧录后需要 断开 IO0
  • 真正的用window.open()代替window.showModalDialog()

    这个问题 纠结了很长时间在网上找到的 记录一下 正文如下 模式窗口太过于局限性 所以我研究了一个完全可以用window open 代替window showModalDialog 的方法 其资料贴在了下面 有两个页面 一个是调用页面 mai
  • greenbow怎样设置服务器无响应,连接到虚拟机超时

    连接到虚拟机超时 内容精选 换一换 通过网线将DES Edge设备10GE光纤口 图1编号7 从左到右第一列的两个光纤口 与应用服务器所在交换机端口进行连接 将DES Edge设备连接到业务网络 建立业务通道 实现DES Edge设备与应用
  • 有多个li标签,每点击一个li标签改变被点击li标签的背景,并且获取改li标签中的数据

    由于在做如下页面的布局时 采用了多个li标签来展现 需要达到的效果是 1 每点击一个选项卡 该选项卡的背景颜色改变 再点击一次就变回本来的颜色 2 支持多选 并且把选中的选项卡数据存入数组 主要用到的方法就是 取到所有的li标签进行循环添加