<!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. java应用提速(速度与激情)

    简介: 本文将阐述通过基础设施与工具的改进,实现从构建到启动全方面大幅提速的实践和理论. 作者 | 阿里巴巴CTO技术来源 | 阿里开发者公众号 联合作者:道延 微波 沈陵 梁希 大熊 断岭 北纬 未 ...

  2. Android Native crash 处理案例分享

    简介: Android Native crash 处理案例分享 1. 背景 目前 mPaas[1] Android使用Crash SDK对闪退进行的处理,CrashSDK 是 Android 平台上一 ...

  3. Apache Flink在 bilibili 的多元化探索与实践

    简介: bilibili 万亿级传输分发架构的落地,以及 AI 领域如何基于 Flink 打造一套完善的预处理实时 Pipeline. 本文由 bilibili 大数据实时平台负责人郑志升分享,本次分 ...

  4. IPv6时代，中小企业该如何布局？

    ​简介:IPv6要为全世界的每一粒沙子都分配一个IP,你的企业跟上了吗? 11月中旬,中央网信办等部门联合印发了<关于开展IPv6技术创新和融合应用试点工作的通知>,联合组织开展IPv6技 ...

  5. Raft 共识算法1-Raft基础

    Raft 共识算法1-Raft基础 Raft算法中译版地址:http://www.redisant.cn/etcd/contact 英原论文地址:https://raft.github.io/raft ...

  6. 三：瑞芯微OK3399-C开发板

    场景一 给广告机加上一双智慧的眼睛,时刻关注这经过自己面前的每一个人,把他(她)们的性别.年龄.胖瘦.着装风格.经过频次.观看广告的时间.每个广告观看的人数等等一一记录下来,为广告机运营商.广告创业设 ...

  7. 关于sql server导出csv格式文件的身份证号乱码问题处理办法

    1.使用SQL Server数据库经常会遇到导出大量数据的情况,例如导出40万条数据,虽然EXCL支持可以放入百万的数据,但是使用数据库复制,粘贴到EXCL表格时,数据库会提示溢出的情况,如下图所示: ...

  8. grads 同时读取多个ctl文件方法

    1.不同的文件进行不同的设置:'set dfile 2' 2.读取不同文件的变量:qv.2 实例如下:'reinit''open e:\tskt.CTL''open e:\uwnd.CTL''open ...

  9. C#的GroupBy方法是如何工作的

    前言:先贴结果 GroupBy方法是如何工作的? 一.准备6个待分组的学生对象 class student { public string name;//姓名 public int grade;//年 ...

  10. EDP .Net开发框架--权限

    平台下载地址:https://gitee.com/alwaysinsist/edp 权限介绍 权限实际上就是谁有权使用或是访问什么,这里的"谁"可以视作"授权对象&quo ...