<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var buttons = document.getElementsByTagName('input');
var oDiv = document.getElementsByTagName('div');
for (var i = 0; i < buttons.length; i++) {
buttons[i].index = i;
buttons[i].onclick = function () {
for (var j = 0; j < oDiv.length; j++) {
oDiv[j].id = ' ';
};
oDiv[this.index].id = 'active';
console.log(i);
console.log(this.index);
};
};
};
</script>
</head>
<body>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div id="active">111</div>
<div>222</div>
<div>333</div>
</body>
</html>
- 在做选项卡切换功能时，使用oDiv[i].id来改变div的值，发现不能成功，原来是因为onclick在鼠标点击时才触发，此时网页已加载完成，i=3，故无法正常获取索引值；而加上buttons[i].index = i就是在for循环时给每个元素都增加index属性，并附上i的值，此时的i不是在网页加载完后执行的，所以能正确获取索引值，倘若省略这一步，this.index的值将为undefined。
