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 ...
随机推荐
- Jquery实现ready()的源码
function bindReady(){ if ( readyBound ) return; readyBound = true; // Mozilla, Opera and webkit nigh ...
- 30分钟入门Java8之默认方法和静态接口方法
30分钟入门Java8之默认方法和静态接口方法 前言 上一篇文章30分钟入门Java8之lambda表达式,我们学习了lambda表达式.现在继续Java8新语言特性的学习,今天,我们要学习的是默认方 ...
- 实战：ajax带参数请求slim API
restful api 支持get,post,put,delete等方法,那么jquery客户端怎么去实现呢?涉及到跨域又怎么办? 很多时候需要传递一个token(api_key) 去识别用户身份,获 ...
- [0x01 用Python讲解数据结构与算法] 关于数据结构和算法还有编程
忍耐和坚持虽是痛苦的事情,但却能渐渐地为你带来好处. ——奥维德 一.学习目标 · 回顾在计算机科学.编程和问题解决过程中的基本知识: · 理解“抽象”在问题解决过程中的重要作用: · 理解并实现抽象 ...
- 直接把数据库中的数据保存在CSV文件中
今天突然去聊就来写一个小小的demo喽,嘿嘿 public partial class Form1 : Form { public Form1() { InitializeComponent(); } ...
- ruby -- 进阶学习（十六）ckeditor去除“浏览服务器”按钮
FROM:http://blog.163.com/zjc_8886/blog/static/2408175201011222590967/ 实现方法: 由于ckeditor中的"上传图片& ...
- php和java的memcached使用的兼容性问题解决过程
1. 背景: php 使用memcached客户端设置一个key,java使用java-memcached-client去读,报错如下: ERROR|com.whalin.MemCached.MemC ...
- window xp Apache与Tomcat集群配置--转载
转载地址:http://www.cnblogs.com/obullxl/archive/2011/06/09/apache-tomcat-cluster-config.html 一. 环境说明 Win ...
- SharePoint 2013中的爬网最佳做法
了解在 SharePoint Server 2013 中爬网的最佳做法 搜索系统对内容进行爬网,以构建一个用户可以对其运行搜索查询的搜索索引.本文包含有关如何最有效地管理爬网的建议. 本文内容: 使用 ...
- 对于Discuz!NT不允许新用户注册的解决办法
客户论坛用的是Discuz!NT,但是用户注册总是提示不允许新用户注册,对于这个问题,网上好多说的是管理员登录后台,在"用户与访问控制"里将允许新用户注册改为"是&quo ...