js实现点击<li>标签弹出其索引值
据说这是一道笔试题，以下是代码，没什么要文字叙述的，就是点击哪个<li>弹出哪个<li>的索引值即可：
<html>
<head>
<style>
li{
width:50px;
height:30px;
margin:5px;
float:left;
text-align: center;
line-height: 30px;
border-radius:4px;
list-style-type: none;
background: red;
cursor:pointer;
}
</style>
<script>
window.onload=function(){
//此处有三种方法
};
</script>
<head>
<body>
<div>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
</div> </body>
</html>
第一种：
var oli=document.getElementsByTagName('li');
for(var i=0; i<oli.length;i++)
{
oli[i].index=i;
oli[i].onclick=function(){
alert('你点击的列表的下标是：'+this.index);//列表下标从0开始
};
}
除此之外还有别的方法：
var oli=document.getElementsByTagName('li');
for(var i=0;i<oli.length;i++)
{
oli[i].onclick=(function(n){
return function(){
alert(n);
}
})(i)
}
或者：
var oli=document.getElementsByTagName('li');
for(var i=0;i<oli.length;i++)
{
(function(n){
oli[i].onclick=function(){
alert(n);
}
})(i)
}
效果：
点击“列表4”弹出：
js实现点击<li>标签弹出其索引值的更多相关文章
- js循环给li绑定事件实现 点击li弹出其索引值 和内容
代码如下: html代码 <ul> <li>房产</li> <li>家居</li> <li>二手房</li> < ...
- 根据juery CSS点击一个标签弹出一个遮罩层的简单示例
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 点击每个li节点，都弹出其文本值及修改
点击每个li节点,都弹出其文本值 1,获取所有的li节点 var liNodes=document.GetElementsByTagName("li"); 2,使用for循环进行遍 ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- Jquery 点击图片在弹出层显示大图
http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏) <html> <head> ...
- 第一个微信小程序（实现点击一个按钮弹出toast）
今天根据网上的教程搭建了微信小程序的环境,然后看文档做了一个简单的小应用. 项目的目录是这个样子的: app.js.app.json.app.wxss是全局文件,必不可少的文件.定义在app.wxss ...
- react 点击空白处隐藏弹出层
点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡 ...
- 基于jQuery点击圆形边框弹出图片信息
分享一款基于jQuery点击圆形边框弹出图片信息.这是一款鼠标经过图片转换成圆形边框,点击可弹出文字信息.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=&q ...
- div悬浮在屏幕的中间及点击按钮关闭弹出框
#fd { position: fixed; z-index: 999; width: 109px; height: 323px; top: 71%; right: 1%; margin: -50px ...
随机推荐
- 如何将 Cortana 与 Windows Phone 8.1 应用集成 ( Voice command - Natural language recognition )
随着 Windows Phone 8.1 GDR1 + Cortana 中文版的发布,相信有很多用户或开发者都在调戏 Windows Phone 的语音私人助理 Cortana 吧,在世界杯的时候我亲 ...
- C#参考：Linq 概述
Linq (Language Integrated Query,语言集成查询),是微软公司提供的一项新技术,它能够将查询功能引入到.NET 3.5 所支持的编程语言中,例如C#,Visual Basi ...
- 正向代理VS反向代理 总结
1.访问方向 正向代理:通常是从内部访问外部的网站或服务器,但又无法直接访问到外部的网站,而这个代理是可以访问到外部网站的.如果在中国境内通过代理访问Facebook.Twitter等网站 反向代理: ...
- c# socket 解决粘包，半包
处理原理: 半包:即一条消息底层分几次发送,先有个头包读取整条消息的长度,当不满足长度时,将消息临时缓存起来,直到满足长度再解码 粘包:两条完整/不完整消息粘在一起,一般是解码完上一条消息,然后再判断 ...
- Ubuntu 12.10
上海交通大学更新服务器(教育网千兆接入,联通/电信线路情况不详),包含其他开源镜像: deb http://ftp.sjtu.edu.cn/ubuntu/ quantal main multivers ...
- codeforces MUH and Important Things
/* 题意:给一个序列,表示每一项任务的难度,要求完成每一项任务的循序是按照难度由小到大的!输出三种符合要求的工作顺序的序列! 思路:直接看代码.... */ 1 #include<iostre ...
- 关于C# Math 处理奇进偶不进
话说,最近一次系统维护 用JS读取导入Excel中的实验数据,出现被自动四舍五入.后来到客户现场听客户反馈 Excel实验数据要求 奇进偶不进. 关于 奇进偶不进 产生的由来:从统计学的角度,“奇进 ...
- 【转载】给VM虚拟机增加硬盘容量
转载自:http://www.douban.com/note/53678368/ vmware-vdiskmanager [选项]这里的选项你必须包含以下的一些选择项或参数选项和参数描述<dis ...
- 4、总结：基于Oracle Logminer数据同步
最近开发Oracle数据同步功能,做了些调研和验证,这个工作过去有段时间,怕时间长了忘记,故用博客共享出来.在这系列中共写了三篇文章,第一篇是写LogMiner配置及使用,第二篇是测试了LogMine ...
- Windows Azure Web Site (17) 设置Web App TimeOut时间
<Windows Azure Platform 系列文章目录> 我们在开发Azure Web App的时候,如果页面加载时间过长,可能需要设置Time Out时间. 在这里笔者简单介绍一下 ...