js 点击列表li,获得当前li的id
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的更多相关文章
- JS如何给ul下的所有li绑定点击事件,点击使其弹出下标和内容
这是一个非常常见的面试题,出题方式多样,但考察点相同,下面我们来看看这几种方法:方法一: var itemli = document.getElementsByTagName("li&quo ...
- 004 作业二(单击弹跳li节点的每个文本节点的值;点击每个 li 节点, 若 li 节点的文本值没有 ^^ 开头, 加上,有,则去除)
1.需求 点击每个 li 节点, 都弹出其文本值 2.程序 <!DOCTYPE html> <html> <head> <meta charset=" ...
- 完整版百度地图点击列表定位到对应位置并有交互动画效果demo
1.前言 将地图嵌入到项目中的需求很多,好吧,我一般都是用的百度地图.那么今天就主要写一个完整的demo.展示一个列表,点击列表的任一内容,在地图上定位到该位置,并有动画效果.来来来,直接上demo ...
- JS产品分类列表练习
CSS: ;;} ul,li{list-style: none;} body{color: #666;background: #f5f5f5;} a{text-decoration: none;col ...
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- 原生js移动端列表无缝间歇向上滚动
在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...
- 基于jQuery实现点击列表加载更多效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...
- 极简的js点击组图切换效果
程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含 ...
随机推荐
- 无法访问此网站 ERR_CONTENT_DECODING_FAILED
这个错误挺少见的. 百度了下: 1,说是文件编码格式不正确: 2,说是Nginx的压缩和tomcat的压缩冲突了,关闭gzip压缩: 3,……………… 不管是哪一种情况,都是编码问题,所以逐一排查,根 ...
- artDialog提示框
API网址 http://aui.github.io/artDialog/doc/index.html 相关资料下载 https://code.google.com/archive/p/artdial ...
- Codeforces #367 (Div. 2) D. Vasiliy's Multiset (trie 树)
http://codeforces.com/group/1EzrFFyOc0/contest/706/problem/D 题目:就是有3种操作 + x向集合里添加 x - x 删除x元素,(保证存在 ...
- The 2019 Asia Nanchang First Round Online Programming Contest The Nth Item
The Nth Item 思路: 先用特征根法求出通向公式,然后通向公式中出现了\(\sqrt{17}\),这个可以用二次剩余求出来,然后可以O(\(log(n)\))求出. 但是还不够,我们先对\( ...
- 【Java】聚合和组合的区别
组合:部分与整体是与生俱来的,部分的存在依赖于整体.比如人与人的某个器官,人一出生,器官就在,人死亡,器官也就没了意义. 聚合:你与你的电脑(或者其它物品),电脑是属于你的吧,但是你是一出生就拥有了电 ...
- Mysql存储过程查询数据插入别的表里。
DELIMITER// CREATE PROCEDURE setRoomManger2() BEGIN ); ; DECLARE cur CURSOR FOR SELECT roomid FROM n ...
- springboot与jdk1.6结合使用需要注意的地方
问题描述:官方文档,默认Spring boot 1.3.5 要求 Java7版本,而当前项目要求 Java6,而且在idea工具中创建项目时,如果采用选项“Spring Initializr”来创建工 ...
- Python Tinker学习笔记
一直在简单看看python,这次项目需要做个界面,最好是要跨平台的,之前考虑QT,但是树莓派上QT跨平台编译一直装这有问题,后来发现Python不就可以么? 于是决定用python做个界面,但是做界面 ...
- Ubuntu上配置vtk开发环境——基于visual studio code 与 gcc
环境说明 vtk版本7.1.1 visual studio 1.16.1 Ubuntu 16.04 + 自带的gcc 编译过程与windows下类似还好,运行自己的代码开始面对cmake与make的各 ...
- angularJs driective指令小实例
做一个下拉菜单,体会指令各参数的作用 html代码 <script type="text/ng-template" id="mydropdown.html" ...