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.οnlοad=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].οnclick=function(){alert('你点击的列表的下标是：'+this.index);//列表下标从0开始};}

除此之外还有别的方法：

var oli=document.getElementsByTagName('li');for(var i=0;i<oli.length;i++){oli[i].οnclick=(function(n){return function(){alert(n);}})(i)}

或者：

var oli=document.getElementsByTagName('li');for(var i=0;i<oli.length;i++){(function(n){oli[i].οnclick=function(){alert(n);}})(i)}

效果：

点击“列表4”弹出：

转载于:https://www.cnblogs.com/chayangge/p/4288704.html

js实现点击li标签弹出其索引值相关推荐

点击a标签弹出iframe_iframe标签与a标签
iframe标签 iframe标签,内联框架元素 ,有效地将另一个HTML页面嵌入到当前页面中.例如加入以下代码即可在当前页面嵌套一个百度页面.不过,嵌套页面之后,当前html的页面加载速度就变慢了 ...
html 弹出复选框,js点击文本框弹出可选择的checkbox复选框
本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解 ...
jQuery实现点击文本框弹出热门标签的提示示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
点击文本框弹出热门标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
点击输入框弹出文字html,jQuery实现点击文本框弹出热门标签的提示效果
jQuery实现点击文本框弹出热门标签的提示示例_网页代码站 body { font-size:12px;font-family:Arial; } #m_tagsItem { background:# ...
arcgis for js 4.X自定义气泡点击地图对象弹出对话框
题目的意思是,arcgis for js 4.X自定义气泡,点击地图对象弹出对话框,而不是弹出气泡.对话框是vue页面组成的自定义对话框,不是地图页面的对象. 基本思路: 1)气泡模板(PopupTe ...
原生js实现如下效果：一个按钮，点击它会弹出对话框，但5秒内再点击不会再弹出对话框。5秒后恢复正常。
原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框.5秒后恢复正常. 第一种方式: 使用函数节流的方式(就是设置一个变量,来一个判断语句,判断这个变量的值.为真或假执 ...
html点击按钮弹出悬浮窗_9种实现点击一个链接弹出一个小窗口的代码
9 种实现点击一个链接弹出一个小窗口的代码因为着是一段 javascripts 代码, 所以它们应该放在之间. 是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来.要 ...
html中如何写一个提示框,html弹出公告 html中点击列表文字弹出提示框？
怎么在网页制作中给主页设置弹出公告,要CSS布局HTML小编今天和大家分享在主页打... 无标题文档 45565 把style属性加给你的弹窗标签就可以了,宽高位置均可变. 哪位前辈高手有html的窗 ...

js实现点击li标签弹出其索引值

js实现点击li标签弹出其索引值相关推荐

最新文章

热门文章