zoukankan      html  css  js  c++  java
  • js实现点击<li>标签弹出其索引值

    据说这是一道笔试题,以下是代码,没什么要文字叙述的,就是点击哪个<li>弹出哪个<li>的索引值即可:

    <html>
    <head>
    <style>
    li{
    	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”弹出:



  • 相关阅读:
    菜根谭#39
    菜根谭#38
    菜根谭#37
    菜根谭#36
    菜根谭#35
    菜根谭#34
    菜根谭#33
    菜根谭#32
    mysqli的使用
    mysql常用修改创建语句
  • 原文地址:https://www.cnblogs.com/chayangge/p/4288704.html
Copyright © 2011-2022 走看看