主要就是有一个已知li列表,当用户点击某一个li时,返回其所在li中的位置
思路:
代码如下:
<html>
<head></head>
<body>
<ul id="list">
<li>标签1</li>
<li>标签2</li>
<li>标签3</li>
<li>标签4</li>
<li>标签5</li>
</ul>
</body>
</html>
<script>
// 方法一
var oli=document.getElementsByTagName('li');
for(var i=0; i<oli.length;i++)
{
oli[i].index=i+1;
oli[i].onclick=function(){
alert('你点击的列表的下标是:'+this.index);
//列表下标从0开始
};
}
// 方法二 事件托管,由父节点监听点击事件
var ul = document.getElementById('list');
var li = ul.getElementsByTagName('li');
ul.onclick = function(e){
var e = e || window.event, target = e.target || e.srcElement;
for(var s in li){
if(target == li[s]){
s = parseInt(s)+1;
alert(s);
break;
}
}
}
</script>