<!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. EMAS移动测试-远程真机篇

    简介: 导读:本文将介绍申请远程真机以及在远程真机上执行测试任务的详细操作,包括申请远程真机.安装应用.扫码.定位.性能测试等. 一.移动测试概览 移动测试服务(Mobile Testing)是为企业 ...

  2. KubeVela + KEDA：为应用带来“与生俱来”的弹性伸缩能力

    简介: 在这篇博文中,我们将简要解释需要考虑的领域,KEDA 如何使应用自动伸缩变得简单,以及为什么阿里云企业分布式应用服务(EDAS)在 KEDA 上完全标准化. 联合作者 | Yan Xun,阿里 ...

  3. RDS PostgreSQL一键大版本升级技术解密

    ​简介: 内容简要: 一.PostgreSQL行业位置 二.PostgreSQL版本升级背景 三.PostgreSQL版本升级解密 四.PostgreSQL版本升级成果 一.PostgreSQL行业位 ...

  4. [Py] Python 的 shape、reshape 含义与用法

    shape 方法用于查看数据是几行几列的. reshape 方法用于不更改数据的情况下,重新把数据进行规划成指定的行数和列数. .reshape(-1, 1)  -1 表示自动,1 表示整理成 1 列 ...

  5. C51笔记-#点灯#流水灯#延时#库函数

  6. vue通过input选取图片，jq的ajax向服务器上传img

    <template>   <div class="">     <!-- 选择后预览 -->     <img v-if="im ...

  7. vue--v-if和v-show的区别（个人项目中的理解应用）

    在面试的时候,一道vue基础到不能再基础的面试题叫做v-if与v-show的区别,当然答案网上一搜一大堆,基本两句话就能说明: 1.相同点:都是根据指令是否渲染该组件 2.不同点:v-if仅重新渲染当 ...

  8. golang 并发问题

    如何使用channel实现定时器? 使用channel的阻塞,里面放一个sleep就可以了 Go语言--goroutine并发模型: 视频地址: https://www.bilibili.com/vi ...

  9. Linux中的which whereis locate

    which which会在PATH环境中搜寻可执行文件 whereis Linux会将系统里面所有的文件都搜集到一个数据库文件中,whereis从这个数据库文件里面寻找文件 locate locate ...

  10. CSS样式（第三篇）

    ​ <div class="box1"> <div class="line"></div> <div class=&q ...