<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
ul{
width: 300px;
height: 300px;
}
li{
width: 100px;
height: 100px;
border: 1px solid #000;
box-sizing: border-box;
/* box-sizing: 设置当前width、height包含的内容有哪些
border-box: border + width
content-box: width
*/
float: left;
text-align: center;
line-height: 100px;
}
div{
width: 100px;
height: 100px;
background: red;
margin-left: 10px;
float: left;
display: none;
}
</style>
<body>
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<li>006</li>
<li>007</li>
<li>008</li>
<li>009</li>
</ul>
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div>07</div>
<div>08</div>
<div>09</div>
<script>
// for循环在页面加载的一瞬间执行完成, 当前i已经变成了循环结束的的条件
// 点击每一个li, 让当前的li背景色变红
var lis = document.getElementsByTagName('li');
var divs = document.getElementsByTagName('div');
// 每一个添加事件
for(var i = 0; i < lis.length; i++){
console.log(i);
// 把自己的下标作为标签的一个属性值存储在自定义属性上 ---> 自定义索引
// 标签.属性名 = 下标;
lis[i].index = i;
lis[i].onclick = function(){
// console.log(lis, i);
// for循环嵌套的事件中得不到正确的下标i
// 改变li的背景色
console.log(this.index);
// lis[i].style.background = 'red';
this.style.background = 'red';
divs[this.index].style.display = 'block';
}
}
</script>
</body>
</html>