据说这是一道笔试题，以下是代码，没什么要文字叙述的，就是点击哪个<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 Windows7下时间同步的频率时 钟同步间隔

    今天发现时间不对,同步时间后看到Windows系统默认是一周才同步一次时间,频率太低了.查找了一下资料,找到了两种调整Win7时间同步频率的方法. 方法一:注册表法 这种方法是通过修改注册表中的键值来 ...

  2. Ubuntu 中搭建 LAMP 及 php 开发工具

    所谓 LAMP,指的是:Linux+Apache+Mysql+Php 仅以此文做一个备忘录 Step1. 安装 Apache 1. 在 terminal 中输入一下命令并执行: sudo apt-ge ...

  3. php生成随机密码(php自定义函数)转自先锋教程网

    php生成随机密码(php自定义函数) 时间:2015-12-16 20:43:49来源:网络 导读:php随机密码的生成代码,使用php自定义函数生成指定长度的随机密码,密码规则为小写字母与数字的随 ...

  4. div 等高

    padding-bottom: 5000px; margin-bottom: -5000px;

  5. Knockout 新版应用开发教程之Observable Arrays

    假如你想到侦测和相应一个对象的改变,假如你想要侦测和响应一一组合集的改变,就要用observableArray 在许多场景都是很有用的,比如你要在UI上需要显示/编辑的一个列表数据集合,然后对集合进行 ...

  6. webgame设计之功能模块的代理模式

    原文地址:http://chengduyi.com/blog/?post=27 在游戏设计中,通常会将一些实现了具体功能的模块进行封装,达到重用的目的.这些功能模块包括:1.网络通信模块(实现连接,断 ...

  7. codeforces C. Diverse Permutation(构造)

    题意:1...n 的全排列中 p1, p2, p3....pn中,找到至少有k个 |p1-p2| , |p2-p3|, ...|pn-1 - pn| 互不相同的元素! 思路: 保证相邻的两个数的差值的 ...

  8. 后端码农谈前端（HTML篇）第二课：常见元素

    一.根元素 <doctype> 定义文档类型. <html> 定义 HTML 文档. 二.元数据元素 <head> 定义关于文档的信息. <meta> ...

  9. LoRaWAN协议(二)--LoRaWAN MAC数据包格式

    名词解析 上行:终端的数据发送经过一个或多个网关中转到达网络服务器. 下行:由网络服务器发送给终端设备,每条消息对应的终端设备是唯一确定的,而且只通过一个网关中转. LoRaWAN Classes L ...

  10. 初遇sql server

    今天初始接触sql server 和mysql的语法有一些不同 sql server中使用[] 或双引号来表示数据库.字段名.表名等,而字符串使用单引号来表示 mysql中数据库名,表名,字段名不需要 ...