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. 无线热点登陆认证原理探究---captive portal 什么是Captive Portal

    什么是Captive Portal 大家肯定都连过公共场所的wifi热点,比如麦当劳等地方的.他们的wifi往往一连上去就会弹出一个要求登录或者微信关注之类的页面,只有在这个页面完成操作了才能正常访问 ...

  2. DOORS 和Reqtify — 需求管理和需求追溯工具

    IBM Rational DOORS 可实现对整个产品的全生命周期需求管理,覆盖从需求.到设计以及测试阶段.是一款具有广泛使用的企业级专业需求管理工具.DOORS 可以将项目开发过程中产生的各级需求和 ...

  3. about微信小程序

    1.<text>文本标签</text> ps:只有用text包裹的文字才能在微信里长按选中 2.单位 px变成rpx rpx是逻辑分变率     px=2rpx, rpx可以实 ...

  4. linux 用户,密码,用户组

    linux 用户,密码,用户组 在root登陆的情况下: 用户密码: useradd <username> passwd <username> <提示输入密码>: ...

  5. Electron Apps Are Bad, So Now You Can Create Desktop Apps With HTML5 + Golang

    原文:https://www.phoronix.com/scan.php?page=news_item&px=HTML5-Golang-Desktop-Apps --------------- ...

  6. python学习之面向对象

    目录 __main__,__name__ __module__,__class__ __init__ __del__ __repr__,__str__ __mro__ __call__ __new__ ...

  7. Git----基础常用的命令总结

    基础常规操作 git init git clone <版本库的网址> <本地目录名> touch xxx 本地创建一个xxx的文件 git add xxx git commit ...

  8. postgresql学习笔记--基础篇 - copy

    1. psql 导入/导出数据 psql支持文件数据导入到数据库,也支持数据库表数据导出到文件中. COPY命令和\copy 命令都支持这两类操作,但两者有如下区别: COPY 命令是SQL命令,\c ...

  9. Codeforces Round #597 (Div. 2) D. Shichikuji and Power Grid

    链接: https://codeforces.com/contest/1245/problem/D 题意: Shichikuji is the new resident deity of the So ...

  10. 004_软件安装之_Altium Designer

    文件中有软件简单视频教程,安装有pdf教程 链接:https://pan.baidu.com/s/1ow-OHdsPuAyXCevjCVqEsg 提取码:l2rt 复制这段内容后打开百度网盘手机App ...