1、首先打开html编辑器，新建一个html文件，里面写入4个li标签，并在上方的style标签中设置li的样式，给li标签高度和宽度以及边框，同时设置li标签之间的间隔。
2、然后在script标签中写入js，首先用getElementsByTagName获取所有li标签的dom元素，任何使用for循环遍历数组中的元素，for循环内部设置每个li标签的index元素，在给每个元素添加点击事件，点击之后就会弹出li标签的index值出来。
3、最后打开浏览器，点击其中的一个标签，就会弹出对应的li标签数值了。
温馨提示：答案为网友推荐，仅供参考
第1个回答 2017-06-18
代码如下，只要是要在li的for循环里通过对oLi[i].index=i一步给oLi[i]赋值，这样才可以告诉系统我的这个i是第几个i，系统自己是不知道你的li是第几个的。希望可以帮到你。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#ul1{
margin: 100px auto;
width: 100px;
height: 200px;
text-align: center;
}
#ul1>li{
width: 100px;
height: 40px;
line-height: 40px;
border-bottom:1px dotted white;
box-sizing: border-box;
background: #515352;
list-style:none;
color: white;
}
</style>
<script src="move-perfect.js"></script>
<script>
window.onload=function(){
var oUl=document.getElementById('ul1');
var oLi=oUl.getElementsByTagName('li');
for(var i=0;i<oLi.length;i++){
oLi[i].index=i;//这个index就是做个介质，来获取当前的i是第几个，因为系统不会判断你这个i是第几个，智能通过中间的index来获取赋值。
oLi[i].onmouseover= function () {
alert(this.index);
};
}
};
</script>
</head>
<body>
<ul id="ul1">
<li class="fields">1</li>
<li class="fields">2</li>
<li class="fields">3</li>
<li class="fields">4</li>
<li class="fields">5</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#ul1{
margin: 100px auto;
width: 100px;
height: 200px;
text-align: center;
}
#ul1>li{
width: 100px;
height: 40px;
line-height: 40px;
border-bottom:1px dotted white;
box-sizing: border-box;
background: #515352;
list-style:none;
color: white;
}
</style>
<script src="move-perfect.js"></script>
<script>
window.onload=function(){
var oUl=document.getElementById('ul1');
var oLi=oUl.getElementsByTagName('li');
for(var i=0;i<oLi.length;i++){
oLi[i].index=i;//这个index就是做个介质，来获取当前的i是第几个，因为系统不会判断你这个i是第几个，智能通过中间的index来获取赋值。
oLi[i].onmouseover= function () {
alert(this.index);
};
}
};
</script>
</head>
<body>
<ul id="ul1">
<li class="fields">1</li>
<li class="fields">2</li>
<li class="fields">3</li>
<li class="fields">4</li>
<li class="fields">5</li>
</ul>
</body>
</html>
第2个回答 2015-04-06
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
RunJS 演示代码
</title>
<script>
onload = function() {
var lis = document.getElementsByTagName("li");
var funny = function(i){
lis[i].onclick = function(){
alert("第" + (i+1) + "个");
}
}
for(var i=0;i<lis.length;i++){
funny(i);
}
}
</script>
</head>
<body>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
</ul>
</body>
</html>本回答被提问者采纳
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
RunJS 演示代码
</title>
<script>
onload = function() {
var lis = document.getElementsByTagName("li");
var funny = function(i){
lis[i].onclick = function(){
alert("第" + (i+1) + "个");
}
}
for(var i=0;i<lis.length;i++){
funny(i);
}
}
</script>
</head>
<body>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
</ul>
</body>
</html>本回答被提问者采纳