点击li 该li变色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//$(this) 点击哪个li $(this)就代表哪个li
//siblings() 表示当前选中的li的兄弟
$("li").click(function() {
$(this).css("background-color","pink");
$(this).siblings().css("background-color","white");
});
});
</script>
</head>
<body>
<ul>
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
<li>第四个li</li>
<li>第五个li</li>
<li>第六个li</li>
</ul>
</body>
</html>
点击li 该li变色的更多相关文章
- jquery怎么在点击li标签之后添加一个在class，点击下一个li时删除上一个class？
思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class. 具体演示如下: 1.HT ...
- 遍历ul下的li，点击弹出li的索引
首先我们需要一个html结构 <div > <ul> <li>a</li> <li>a</li> <li>a< ...
- 点击事件获得li标签内容
通过点击事件获得li标签内容 Table of contents 随笔 随笔 <li onclick="liClick(this)">数据</li> //点 ...
- jquery点击li标签之后在该li标签上添加一个class，点击下一个li时删除上一个li的class
思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class 具体演示如下: 1.HTM ...
- 点击页面li显示li中文字
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 利用React遍历数组，并且用数组的元素生成<li>arrItem</li>标签组
var numbers = [1,2,3,4,5,6,7,8,9]; ReactDom.render({ <ul> { numbers.map(function(item){ return ...
- li 与 li 之间有空白间隔是什么原因引起的，有什么解决办法
li 与 li 之间有空白间隔是什么原因引起的,有什么解决办法 原因 浏览器会把inline元素间的空白字符(空格.换行.Tab等)渲染成一个空格.而为了美观,我们通常是一个 放在一行,这导致 换行后 ...
- 点击弹出li所在的序列号
最近在研究一个图片替换功能,及点击左侧商品在右侧弹出层修改图片后,同时左侧的图片也得跟着修改. 我原来考虑的添加ID作为唯一值.但当ID重复了,替换就出BUG了. 最后问公司同事,然后给提供了 根据点 ...
- Jquery的hover方法让鼠标经过li时背景变色
来源地址:http://itfish.net/article/29790.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
- Div+CSS+JQuery实现选项卡，即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。
1.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...
随机推荐
- TiDB、OceanBase、PolarDB-X、CockroachDB二级索引写入性能测评
简介: 二级索引是关系型数据库相较于NoSQL数据库的一个关键差异.二级索引必须是强一致的,因此索引的写入需要与主键的写入放在一个事务当中,事务的性能是二级索引性能的基础.本次测试将重点关注不同分布式 ...
- 云原生应用实现规范 - 初识 Operator
简介: 本文我们将首先了解到 Operator 是什么,之后逐步了解到 Operator 的生态建设,Operator 的关键组件及其基本的工作原理,下面让我们来一探究竟吧. 作者 | 匡大虎.阚俊宝 ...
- 流批一体生产应用！Bigo 实时计算平台建设实践
简介: 本文由 Bigo 计算平台负责人徐帅分享,主要介绍 Bigo 实时计算平台建设实践的介绍 本文由 Bigo 计算平台负责人徐帅分享,主要介绍 Bigo 实时计算平台建设实践的介绍.内容包括: ...
- EventBridge消息路由｜高效构建消息路由能力
简介:企业数字化转型过程中,天然会遇到消息路由,异地多活,协议适配,消息备份等场景.本篇主要通过 EventBridge 消息路由的应用场景和应用实验介绍,帮助大家了解如何通过 EventBridg ...
- 阿里云数据库开源重磅发布：PolarDB HTAP的功能特性和关键技术
简介:在3月2日的阿里云开源 PolarDB 企业级架构发布会上,阿里云 PolarDB 内核技术专家严华带来了主题为<PolarDB HTAP详解>的精彩演讲.在PolarDB存储计算分 ...
- 阿里千万实例可观测采集器-iLogtail正式开源
简介:11月23日,阿里正式开源可观测数据采集器iLogtail.作为阿里内部可观测数据采集的基础设施,iLogtail承载了阿里巴巴集团.蚂蚁的日志.监控.Trace.事件等多种可观测数据的采集工 ...
- 如何评估Serverless服务能力，这份报告给出了40条标准
简介: 如今,已经有评测机构给出了40条标准来对Serverless的服务能力进行评估,这些评估细则既是技术生态繁荣发展的一种表现,也可以作为新进入者评估Serverless落地成效的一种参考依据. ...
- 【详谈 Delta Lake 】系列技术专题 之 Streaming（流式计算）
简介: 本文翻译自大数据技术公司 Databricks 针对数据湖 Delta Lake 的系列技术文章.众所周知,Databricks 主导着开源大数据社区 Apache Spark.Delta ...
- 2019-8-31-C#-简单读取文件
title author date CreateTime categories C# 简单读取文件 lindexi 2019-08-31 16:55:58 +0800 2018-07-19 16:48 ...
- 【爬虫案例】用Python爬取百度热搜榜数据！
目录 一.爬取目标 二.编写爬虫代码 三.同步视频讲解 四.完整源码 一.爬取目标 您好,我是@马哥python说,一名10年程序猿. 本次爬取的目标是:百度热搜榜 分别爬取每条热搜的: 热搜标题.热 ...