据说这是一道笔试题，以下是代码，没什么要文字叙述的，就是点击哪个<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>标签弹出其索引值的更多相关文章

  1. js循环给li绑定事件实现 点击li弹出其索引值 和内容

    代码如下: html代码 <ul> <li>房产</li> <li>家居</li> <li>二手房</li> < ...

  2. 根据juery CSS点击一个标签弹出一个遮罩层的简单示例

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

  3. 点击每个li节点，都弹出其文本值及修改

    点击每个li节点,都弹出其文本值 1,获取所有的li节点 var liNodes=document.GetElementsByTagName("li"); 2,使用for循环进行遍 ...

  4. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  5. Jquery 点击图片在弹出层显示大图

    http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏) <html> <head> ...

  6. 第一个微信小程序（实现点击一个按钮弹出toast）

    今天根据网上的教程搭建了微信小程序的环境,然后看文档做了一个简单的小应用. 项目的目录是这个样子的: app.js.app.json.app.wxss是全局文件,必不可少的文件.定义在app.wxss ...

  7. react 点击空白处隐藏弹出层

    点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡 ...

  8. 基于jQuery点击圆形边框弹出图片信息

    分享一款基于jQuery点击圆形边框弹出图片信息.这是一款鼠标经过图片转换成圆形边框,点击可弹出文字信息.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=&q ...

  9. div悬浮在屏幕的中间及点击按钮关闭弹出框

    #fd { position: fixed; z-index: 999; width: 109px; height: 323px; top: 71%; right: 1%; margin: -50px ...

随机推荐

  1. win7任务栏还原为xp样式

    win7的确是非常强大的操作系统,值得一提的是超级任务栏,非常新颖,不过,不是很适应win7的超级任务栏,今天,我们恢复win7超级任务栏还原xp任务栏. 方法/步骤: 1.在win7超级任务栏空白处 ...

  2. JRE和JDK

    转自:http://www.cnblogs.com/myitm/archive/2011/05/03/2035942.html   很多程序员已经干了一段时间java了依然不明白jdk与jre的区别. ...

  3. 审核流(3)低调奢华，简单不凡，实例演示-SNF.WorkFlow--SNF快速开发平台3.1

    下面我们就从什么都没有,结合审核流进行演示实例.从无到有如何快速完美的实现,然而如此简单.低调而奢华,简单而不凡. 从只有数据表通过SNF.CodeGenerator代码生成器快速生成单据并与审核流进 ...

  4. MyBatis知多少（24）存储过程

    使用MyBatis配置来调用存储过程.为了理解这一章,首先需要了解我们是如何在MySQL中创建一个存储过程. 在继续对本节学习之前,可以自行学习MySQL存储过程. 我们已经在MySQL下有EMPLO ...

  5. 在C函数中保存状态：registry、reference和upvalues

    C函数可以通过堆栈来和Lua交换数据,但有时候C函数需要在函数体的作用域之外保存某些Lua数据,那么我们想到全局变量或static变量,这样做的缺点是:(1)为Lua设计C函数库时,导致不可重入:(2 ...

  6. linux2.6.24内核源代码分析（2）——扒一扒网络数据包在链路层的流向路径之一

    在2.6.24内核中链路层接收网络数据包出现了两种方法,第一种是传统方法,利用中断来接收网络数据包,适用于低速设备:第二种是New Api(简称NAPI)方法,利用了中断+轮询的方法来接收网络数据包, ...

  7. Spring中加载配置文件的方式

    原文:http://blog.csdn.net/snowjlz/article/details/8158560 Spring 中加载XML配置文件的方式,好像有3种, XML是最常见的Spring 应 ...

  8. 编写高质量JS代码的68个有效方法（二）

    [20141011]编写高质量JS代码的68个有效方法(二) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  9. Tips11:用[Rang]来限制Inspector中的变量

    我们在写脚本的过程中可能会用到很多Public变量,如INT型,Float型,这些变量在项目中可能有着一个默认的实际范围,如血量不能为负数,而且int float本来就是有一个范围的,如果对这些变量加 ...

  10. [转载]在线文档预览方案-Office Web Apps

    最近在做项目时,要在手机端实现在线文档预览的功能.于是百度了一下实现方案,大致是将文档转换成pdf,然后在通过插件实现预览.这些方案没有具体实现代码,也没有在线预览的地址,再加上项目时间紧迫.只能考虑 ...