<!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. 阿里云日志服务SLS，打造云原生时代智能运维

    ​2021年10月21日,阿里云针对企业运维难题,在云栖大会为大家带来了一场<智能运维论坛>的主题演讲.在会上,阿里云资深技术专家.日志服务技术负责人简志提出"云原生时代,企业业 ...

  2. coredump 瘦身风云

    ​简介: minicoredump神也! ​ 继上一篇非典型程序员青囊搞定内存泄露问题后,美美地睡了一觉.睡梦中,突然金光闪闪,万道光芒照进时光隧道,恍惚来到大唐神龙年间.青囊此时化身狄仁杰高级助理, ...

  3. 排查指南 | 两个案例学会从埋点排查 iOS 离线包

    ​简介: 首次打开离线包白屏以及报错"-1009"等该如何处理呢? ​ 离线包原理 以一次启动离线包的流程为例,离线包的加载流程分为两种场景,第一种是离线包下载好的场景,流程如图1 ...

  4. [GPT] Nginx+PHP 技术栈 504 Gateway Time-out 解决方案

      1. 504 Gateway Time-out 是什么情况? 504 Gateway Time-out 是一种 HTTP 状态码,表示服务器在作为网关或代理时无法从上游服务器(例如应用程序服务器) ...

  5. 爽了！免费的SSL，还能自动续期！

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 大家好,我是技术UP主小傅哥. 兄弟,当你手里有不少域名,每个域名又配置子域名,那么ssl将是 ...

  6. [Python急救站]人脸识别技术练习

    这段时间做了一个用于初学者学习人脸识别系统的程序,在上代码时,先给说说事前准备: 首先我们需要一个OpenCV的一个haarcascade_frontalface_default.xml文件,只要去G ...

  7. Git——关于Git的一些补充（1）

    Git--关于Git的一些补充(1) 提示:图床在国外且动图比较多的情况下,需要时间加载. 目录: 目录 Git--关于Git的一些补充(1) 提示:图床在国外且动图比较多的情况下,需要时间加载. 目 ...

  8. golang计时器

    timer 计时器 用于在指定的Duration类型时间后调用函数或计算表达式. 如果只是想指定时间之后执行,使用time.Sleep() 使用NewTimer(),可以返回的Timer类型在计时器到 ...

  9. vue2组件封装示例

    组件封装注意事项: 1.props:属性.是父容器给子组件参数传递的桥梁 2.this.$emit:事件.子组件通知父容器事件发生,并给父容器传递数据和参数 3.子组件中经常要用watch监控数据变化 ...

  10. 7月 Splashtop上线了这些新功能 快来看鸭

    经过我们的攻城狮天天努力,我们的软件又得到了升级和完善,上线了一些有用的新功能和增强功能,快来看看吧. Splashtop已为Splashtop Business Access,Splashtop远程 ...