据说这是一道笔试题，以下是代码，没什么要文字叙述的，就是点击哪个<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. Mac终端常用命令收集

    删除非空目录 rm -rf 目录名字 -r 就是向下递归,不管有多少级目录,一并删除-f 就是直接强行删除,不作任何提示的意思 终端修改hosts文件 sudo vi /etc/hosts 切换到su ...

  2. （转）2G到C-RAN网络架构的演进

    这是我一个学霸师弟写的一篇知识普及的文章,涉及到的知识结构很全面,很丰富,对网络通信技术感兴趣的童鞋可以看看,内容我就不贴过来了,直接到他博客上去看吧. 2G到C-RAN网络结构演进

  3. SQL1159 Initialization error with DB2 .NET Data Provider, reason code 7(问题补充)

    SQL1159 Initialization error with DB2 .NET Data Provider, reason code 7 需要注册GAC,修改注册表 IBM官方方案: http: ...

  4. 安卓开发笔记——Fragment+ViewPager组件(高仿微信界面)

    什么是ViewPager? 关于ViewPager的介绍和使用,在之前我写过一篇相关的文章<安卓开发复习笔记——ViewPager组件(仿微信引导界面)>,不清楚的朋友可以看看,这里就不再 ...

  5. SupportV7包中 SwipeRefreshLayout 修改下拉控件的距离

    //修改下拉距离 ViewTreeObserver vto = mCategoryResults.mSwipeRefreshLayout.getViewTreeObserver(); vto.addO ...

  6. 使用JavaScript判断用户是否为手机设备

    最近在做微信服务号开发,其中遇到一个问题是微信服务号查看的个人的消息,如果点击在浏览器中查看(iOS中是在Safari中打开)应该是跳转到登录页面,因为页面需要从后台获取,因为需要服务端判断,如果是存 ...

  7. 对 JimmyZhang 老师的文章《项目代码风格要求》的一些个人观点

    Jimmy Zhang 老师是博客园中我最佩服的人之一,今天看了他的文章<项目代码风格要求>觉得大部分地方我都很认同,工作中也是强迫自己也要按照规范来编程.下面是我的一些个人观点,想贴出来 ...

  8. C#调用Java类

    C#调用Java类 (2011-01-07 14:02:05) 转载▼   分类: Java学习  1. 在Eclipse中新建名称为hello的java project,此工程仅包含一个文件hell ...

  9. ruby -- 基础学习（五）empty、nil、blank三者之间的区别

    这三个方法在ROR中经常用到,都是用来判断是否为空的. 区别是: ruby的方法:.nil?..empty? rails的方法 :.blank? 用法的区别: .nil?    :   判断对象是否存 ...

  10. gcview使用

    1.下载适用的版本 https://github.com/chewiebug/GCViewer Supported verbose:gc formats are: Oracle JDK 1.8 -Xl ...