html给li增加跳转事件,JS实现点击li标签弹出对应的索引功能【案例】

本文实例讲述了JS实现点击li标签弹出对应的索引功能。分享给大家供大家参考，具体如下：

需求:点击li标签,弹出对应的索引

先看效果:

html结构:

• 我是li标签1
• 我是li标签2
• 我是li标签3
• 我是li标签4
• 我是li标签5

方法一:直接往标签里添加索引的方法

var list=document.getElementById('ul1').children;//获取所有的li标签

for(var i=0;i

list[i].setAttribute('index',i+1); //给每一个li标签添加索引

list[i].οnclick=function ( ) {

alert("您点击了第"+this.getAttribute('index')+"个li标签");//获取添加的li标签的元素值

}

}

完整测试示例如下：

www.jb51.net JS点击li标签,弹出对应的索引

• 我是li标签1
• 我是li标签2
• 我是li标签3
• 我是li标签4
• 我是li标签5

var list=document.getElementById('ul1').children;//获取所有的li标签

for(var i=0;i

list[i].setAttribute('index',i+1); //给每一个li标签添加索引

list[i].οnclick=function ( ) {

alert("您点击了第"+this.getAttribute('index')+"个li标签");//获取添加的li标签的元素值

}

}

方法二:使用闭包的方法

var list=document.getElementById('ul1').children;//获取所有的li标签

for(var i=0;i

function outer ( ) {

var num=i+1;

function inner ( ) {

alert("您点击了第"+num+"个li标签");

}

return inner;

}

//给每一个li标签注册单击事件

list[i].οnclick=outer();

}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。