<!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. 阿里云全站加速DCDN重磅发布！打造新一代加速引擎

    简介: 新一代的加速引擎DCDN,安全.高效.可计算 在数字化转型变革逐步深入的当下,安全高效成为企业上云.全球化部署的关键需求. 随着应用场景复杂度不断提升.业务需求差异化发展,为了给企业提供更完善 ...

  2. 如何使用Delta Lake构建批流一体数据仓库

    ​简介:Delta Lake是一个开源存储层,它为数据湖带来了可靠性.Delta Lake提供了ACID事务.可扩展的元数据处理,并统一了流式处理和批处理数据处理.Delta-Lake运行在现有数据湖 ...

  3. 基于 Serverless 架构的头像漫画风处理小程序

    ​简介: 当一个程序员想要个漫画风的头像时... 前言 我一直都想要有一个漫画版的头像,奈何手太笨,用了很多软件 "捏不出来",所以就在想着,是否可以基于 AI 实现这样一个功能, ...

  4. SAE助力「海底小纵队学英语」全面拥抱Serverless，节省25%以上成本

    简介: 阿里云Serveless应用引擎SAE 具备免运维IaaS.按需使用.按量计费.低门槛服务应用上云,并且支持多种语言和高弹性能力等特点,刚好完美解决了客户长期以来运维复杂.资源利用率不高.开发 ...

  5. 前沿分享｜阿里云资深技术专家 魏闯先：AnalyticDB PostgreSQL年度新版本发布

    ​简介: 本篇内容为2021云栖大会-云原生数据仓库AnalyticDB技术与实践峰会分论坛中,阿里云资深技术专家 魏闯先关于"AnalyticDB PostgreSQL年度新版本发布&qu ...

  6. dotnet C# 推荐一个适合新手入门阅读学习的控制台游戏项目

    对于 C# 编程新手,学习语法和框架是必要的,但是如何将它们灵活地运用到实际项目中,是一个更高层次的挑战.如果只是死记硬背语法规则和框架用法,而没有足够的编程实践,很难提高编程水平和逻辑思维.这个时候 ...

  7. 纯css高斯背景模糊（毛玻璃，伪元素，完整实例）

    先上效果图: 写博客不管是做笔记还是干啥,直接上源码不行么,还不放效果图,拆分成几段谁慢慢看,慢慢理解去 自己动手,丰衣足食,上代码: <!DOCTYPE HTML> <html l ...

  8. EasyRepro与测试自动化（ 一） 概览

    EasyRepro是一个框架,允许在特定的Dynamics 365组织上执行自动化UI测试.你可以使用它来自动化冒烟测试.回归测试和负载测试等.该框架是由开源项目Selenium构建的,Seleniu ...

  9. 模型微调-书生浦语大模型实战营学习笔记4&大语言模型7

    大语言模型-7.模型微调 书生浦语大模型实战营学习笔记-4.模型微调 本节对应的视频教程为B站链接.笔记对视频的理论部分进行了整理.部分内容参考李宏毅2024春<生成式人工智能导论>和三分 ...

  10. ansible(8)--ansible的hostname模块

    1. hostname模块 功能:管理远程主机的主机名. 示例一:更改192.168.20.22的主机名为nginx01: [root@xuzhichao ~]# ansible 192.168.20 ...