html

<ul id="demo">
<li id="li-1">li1</li>
<li id="li-2">li2</li>
<li id="li-3">li3</li>
<li id="li-4">li4</li>
<li id="li-5">li5</li>
</ul>
1
2
3
4
5
6
7
js
第一种:监听事件

document.getElementById("demo").addEventListener("click",function(e){
console.log(e.target.id);
})
1
2
3
第二种

var ul = document.getElementById('demo');
ul.onclick = function(e) {
console.log(e.target.id);
};
1
2
3
4
第三种:jQuery点击事件

$('#demo').click(function(e){
console.log(e.target.id);
});
---------------------
作者:sulingliang
来源:CSDN
原文:https://blog.csdn.net/qq_32862143/article/details/73824563
版权声明:本文为博主原创文章,转载请附上博文链接!

js 点击列表li,获得当前li的id的更多相关文章

  1. JS如何给ul下的所有li绑定点击事件,点击使其弹出下标和内容

    这是一个非常常见的面试题,出题方式多样,但考察点相同,下面我们来看看这几种方法:方法一: var itemli = document.getElementsByTagName("li&quo ...

  2. 004 作业二(单击弹跳li节点的每个文本节点的值;点击每个 li 节点, 若 li 节点的文本值没有 ^^ 开头, 加上,有,则去除)

    1.需求 点击每个 li 节点, 都弹出其文本值 2.程序 <!DOCTYPE html> <html> <head> <meta charset=" ...

  3. 完整版百度地图点击列表定位到对应位置并有交互动画效果demo

    1.前言 将地图嵌入到项目中的需求很多,好吧,我一般都是用的百度地图.那么今天就主要写一个完整的demo.展示一个列表,点击列表的任一内容,在地图上定位到该位置,并有动画效果.来来来,直接上demo  ...

  4. JS产品分类列表练习

    CSS: ;;} ul,li{list-style: none;} body{color: #666;background: #f5f5f5;} a{text-decoration: none;col ...

  5. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  6. 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  7. 原生js移动端列表无缝间歇向上滚动

    在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...

  8. 基于jQuery实现点击列表加载更多效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>   < ...

  9. 极简的js点击组图切换效果

    程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含 ...

随机推荐

  1. SSH与ansible 部署方法与核心模块简介

    SSH与ansible 部署方法 部署环境 管理服务器 172.16.1.61 NFS服务器 172.16.1.31 备份服务器 172.16.1.41 1检查SSH服务是否运行并开启服务 netst ...

  2. AD19新功能之Gloss Selected(修线)

    一.强大的修线功能 鼠标从右下往左上框选线,然后按 tab 键,选中需要修的走线 然后执行 “Route”栏下 “Gloss Selected”命令进行修线: 二.循环至推模式 AD19默认为推挤模式 ...

  3. vue-cli2 和vue-cli3

    vue-cli2 和vue-cli3 https://www.cnblogs.com/zhanvo/p/10963776.html <!DOCTYPE html> <html lan ...

  4. Codeforces #496 (Div. 3) Polycarp and Div 3

    思路1: https://blog.csdn.net/qq_41730082/article/details/80984316 题目的意思是给你一串数字长度为(1-2e5),当然由于它的这一串数字是不 ...

  5. unable to access 'https://github.com/shixianqing/img.git/': SSL connect error 解决办法

    解决在linux环境下,git clone 项目,走https协议时,报SSL connect error 错误 升级nss yum update -y nss curl libcurl

  6. 《The one!》团队作业五:团队项目需求改进与系统设计

    项目 内容 作业所属课程 所属课程 作业要求 作业要求 团队名称 < The One !> 作业学习目标 (1)掌握面向对象需求分析方法:(2)学习软件系统总体结构和数据库逻辑结构设计,学 ...

  7. Java原子类--AtomicLongArray

    转载请注明出处:http://www.cnblogs.com/skywang12345/p/3514604.html AtomicLongArray介绍和函数列表 在"Java多线程系列-- ...

  8. 2019HDU多校第7场——构造

    题意 假设现在你在准备考试,明天的考试有 $n$ 道题目,对于分值为 $i$ 的题目至少复习 $i+1$ 小时才能做对,已知总分为$m$,求确保完成 $k$ 道题的最少时间. 分析 手动尝试一下,发现 ...

  9. Linux操作系统常用命令合集——第六篇-压缩和归档操作(16个命令)

    1.gzip [命令作用] 压缩和解压缩文件 gzip/guzip/zcat zcat:不显式展开的前提下查看文本文件内容 zdiff/zgrep/zless/zmore [命令语法]  gzip   ...

  10. 数据结构实验之查找四:二分查找(SDUT 3376)

    #include <stdio.h> #include <string.h> #include <stdlib.h> int a[1000005]; int fin ...