JS implementation of the corresponding index function to pop up the LI tab [Case]

The instance of this paper describes the index functionality of the JS implementation Click the LI tab pop-up. Share to everyone for reference, specifically:

Click the Li tag, pop up the corresponding index

First look:

HTML structure: JS实现点击li标签弹出对应的索引功能【案例】

I am a Li tag 1
I am a li label 2
  I am a li label 3 
  • I am a Li tag 4
  • I am a Li tag 5
  • Method 1: Method for adding an index directly into the label
VAR List = Document. getElementByid (‘ul1’). Children; // Get all LI tag for (var i = 0; i

Complete test example,

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

 www.jb51.net JS Click the Li tag, pop-up the corresponding index 

I am a li label 1
I am a li tag 2
  I am a li tag 3   I am a li tag 4   I am Li Label 5    var list = document.getlementByid ('ul1'). Children; // Get all LI tag for (var i = 0; i  
  • Method 2: Method for using closure
VAR LIST = Document.getlementByid ('ul1'). Children; // Get all LI tag for (var i = 0; i <list.length;i++){//遍历每一个li标签 list[i].setAttribute('index',i+1); //给每一个li标签添加索引 list[i].onclick=function ( ) { alert("您点击了第"+this.getAttribute('index')+"个li标签");//获取添加的li标签的元素值 } }
Interested friends can use
Online HTML / CSS / JavaScript code running tool : http: //tools.jb51.net/code/htmljsrun Tests the above code running effect.

More about JavaScript related content, readers View this site: “JavaScript operation DOM skill summary”, “JavaScript page element operation skills summary”, “JavaScript event related operations and skills”, “JavaScript Find Algorithm Skills Summary”, “JavaScript Data Structure and Algorithm Skills Summary”, “JavaScript His Traditional Algorithm and Skills” and “Summary of JavaScript Error and Debugging Skills” I hope this article will help you JavaScript programming.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment