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点击组图切换效果代码,包含 ...
随机推荐
- Python之路【第十篇】Python操作Memcache、Redis、RabbitMQ、SQLAlchemy
Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...
- Python将字符串转换成字典
1. ast包 import ast user_info = '{"name" : "南湖", "gender" : "male& ...
- rabbitmq二进制安装
一.erland的安装 1.首先测试一下是否已经安装了erlang,命令 rpm -qa | grep erlang 2.没有安装则用yum安装 yum install erlang -y 二.下载r ...
- 推荐系统(5)---大量项目topk近邻相似度
Kd树+BBF(最邻近.次邻近查询)Python实现 kd树和BBF算法 精确Top-K检索及其加速方法探讨
- web server
嵌入式的:boa thttpd wn 网站的: iis apache tomcat ngnix python 的 ruby的 自定的 windows w3mfc c#自定义的1对1 webser ...
- .NET Core、EF、Dapper、MySQL 多种方式实现数据库操作(动态注册实体类)
目录 前言 一.技术选型 二.遇到的坑 2.1..NET Core 下 EF 的问题 2.2.数据库实体类的注册 切记坑 前言 最近在学习.研究 .NET Core 方面的知识,动手搭建了一些小的 D ...
- 移动端自适应js
window.addEventListener('resize', setHtmlFontSize) setHtmlFontSize(); function setHtmlFontSize() { v ...
- vue router.beforeEach(),详解
outer.beforeEach()一般用来做一些进入页面的限制. 比如没有登录, 就不能进入某些页面,只有登录了之后才有权限查看某些页面...说白了就是路由拦截.第一步 规定进入路由需不需要权限 @ ...
- pyharm 上运行 npm 配置方法
问题解决.
- JAVA的变量,数据类型与运算符
1. 变量 计算机处理数据,变量被用来存储处理的数据,之所以叫做变量因为你可以改变存储的值.更确切的说,一个变量指向着一块存储特定类型值的地址,换句话说,一个变量有名称.类型和值.一个变量有一个名称, ...