<!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变色的更多相关文章

  1. jquery怎么在点击li标签之后添加一个在class，点击下一个li时删除上一个class？

    思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class. 具体演示如下: 1.HT ...

  2. 遍历ul下的li，点击弹出li的索引

    首先我们需要一个html结构 <div > <ul> <li>a</li> <li>a</li> <li>a< ...

  3. 点击事件获得li标签内容

    通过点击事件获得li标签内容 Table of contents 随笔 随笔 <li onclick="liClick(this)">数据</li> //点 ...

  4. jquery点击li标签之后在该li标签上添加一个class，点击下一个li时删除上一个li的class

    思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class 具体演示如下: 1.HTM ...

  5. 点击页面li显示li中文字

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. 利用React遍历数组，并且用数组的元素生成<li>arrItem</li>标签组

    var numbers = [1,2,3,4,5,6,7,8,9]; ReactDom.render({ <ul> { numbers.map(function(item){ return ...

  7. li 与 li 之间有空白间隔是什么原因引起的，有什么解决办法

    li 与 li 之间有空白间隔是什么原因引起的,有什么解决办法 原因 浏览器会把inline元素间的空白字符(空格.换行.Tab等)渲染成一个空格.而为了美观,我们通常是一个 放在一行,这导致 换行后 ...

  8. 点击弹出li所在的序列号

    最近在研究一个图片替换功能,及点击左侧商品在右侧弹出层修改图片后,同时左侧的图片也得跟着修改. 我原来考虑的添加ID作为唯一值.但当ID重复了,替换就出BUG了. 最后问公司同事,然后给提供了 根据点 ...

  9. Jquery的hover方法让鼠标经过li时背景变色

    来源地址:http://itfish.net/article/29790.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

  10. Div+CSS+JQuery实现选项卡，即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。

    1.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>   ...

随机推荐

  1. Kubernetes API 编程利器：Operator 和 Operator Framework

    本文整理自<CNCF x Alibaba 云原生技术公开课>第 24 讲,点击"阅读原文"直达课程页面. 关注"阿里巴巴云原生"公众号,回复关键词& ...

  2. 急速上线 Serverless 钉钉机器人“防疫精灵”

    新型冠状病毒疫情肆虐的春节,大家都过得人心惶惶,作为被关在家的程序狗,总觉得要做点什么.于是阿里云 IoT 事业部的几个同学就开始了防疫精灵的开发之路. 从点子到防疫宝,只花了一个下午时间:从防疫宝到 ...

  3. 汽车之家：基于 Flink + Iceberg 的湖仓一体架构实践

    简介: 由汽车之家实时计算平台负责人邸星星在 4 月 17 日上海站 Meetup 分享的,基于 Flink + Iceberg 的湖仓一体架构实践. 内容简要: 一.数据仓库架构升级的背景 二.基于 ...

  4. [TP5] 动态绑定指定默认模块, 解决: 控制器不存在:app\index\controller\Api

    当在 TP5 入口中简单使用 define('BIND_MODULE','index') 绑定默认模块后,访问 api 模块会提示: 控制器不存在:app\index\controller\Api 这 ...

  5. DE10-Lite输入/出高/低电平说明

    DE10-Lite输入/出高/低电平说明 DE10-Lite实验板上有一些设备可以输入/出高/低电平,说明如下: HEX 7-segment LED displays (active low)共阳极 ...

  6. 第3讲-Cadence分裂元件的制作方法

    笔记3-Cadence分裂元件的制作方法 1．Homogeneous和heterogeneous的区别: 2．创建homogeneous类型元件: 3．创建heterogeneous类型元件. 把元件 ...

  7. Solution Set - DP

    CF101E Candies and Stones Link&Submission. DP 的状态设计和转移都是显然的,唯一的问题在于需要输出方案,而这题卡空间.会发现如果用 bitset 存 ...

  8. 【图形数据集】CIFAR-10 dataset数据集

    文献引用:https://www.cs.toronto.edu/~kriz/cifar.html The CIFAR-10 dataset The CIFAR-10 dataset consists ...

  9. 【简说Python WEB】用户身份验证--Werkzeug

    目录 [简说Python WEB]用户身份验证--Werkzeug Flask的security扩展 使用Werkzeug生成密码散列值 系统环境:Ubuntu 18.04.1 LTS Python使 ...

  10. P3193 [HNOI2008] GT考试 题解

    之前学矩阵乘的时候做的题,当时因为不会\(kmp\)搜索一稀里糊涂过去了,现在填个坑. 头图 是\(Logos\)! P3193 [HNOI2008] GT考试 题链:洛谷 题库 题目大意: 求有多少 ...