1、首先打开html编辑器,新建一个html文件,里面写入4个li标签,并在上方的style标签中设置li的样式,给li标签高度和宽度以及边框,同时设置li标签之间的间隔。
2、然后在script标签中写入js,首先用getElementsByTagName获取所有li标签的dom元素,任何使用for循环遍历数组中的元素,for循环内部设置每个li标签的index元素,在给每个元素添加点击事件,点击之后就会弹出li标签的index值出来。
3、最后打开浏览器,点击其中的一个标签,就会弹出对应的li标签数值了。
思路:为li对象添加单击事件→事件触发后利用innerHTML获取li的文本。实例演示如下:
1、HTML结构
<ul id="test"><li>Glen</li>
<li>Tane</li>
<li>John</li>
<li>Ralph</li>
</ul>
2、javascript代码
window.onload = function(){var obj_lis = document.getElementById("test").getElementsByTagName("li")
for(i=0i<obj_lis.lengthi++){
obj_lis[i].onclick = function(){
alert(this.innerHTML)
}
}
}
3、效果演示