# 选项卡案例实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡小案例</title>
<link rel="stylesheet" href="reset.min.css">
<style>
.cardBox {
width: 600px;
margin: 20px auto;
}
.cardBox ul {
position: relative;
top: 1px;
}
.cardBox ul li {
float: left;
margin-right: 20px;
width: 80px;
height: 30px;
text-align: center;
line-height: 30px;
border: 1px solid #000;
}
.cardBox div {
width: 600px;
height: 300px;
text-align: center;
line-height: 300px;
border: 1px solid #000;
display: none;
}
.cardBox li.active {
background-color: aqua;
border-bottom-color: aqua;
}
.cardBox div.active {
background-color: aqua;
display: block;
}
</style>
</head>
<body>
<div class="cardBox" id="cardBox">
<ul class="clearfix">
<li class="active">新闻</li>
<li>娱乐</li>
<li>图片</li>
</ul>
<div class="active">新闻页</div>
<div>娱乐页</div>
<div>图片页</div>
</div>
<script>
/* 效果：当点击LI标签让对应的div显示
* 思路：
* 1、当点击第一个LI时让第一个LI和第一个div同时加上active的class名，
* 2、并让其他两个没有active的class名
* （也可以是点击LI时，先让所有LI和DIV都没有active的class名，
* 点击谁，让谁有active的class名）
*/
let cardBox = document.getElementById("cardBox"),
list = cardBox.getElementsByTagName("li"),
divs = cardBox.getElementsByTagName("div");
function changeBox(index) {
// 让点击的这个LI和DIV有选中样式（但是创建函数的时候，还不知道点击的是哪一个LI呢，只有点击的时候才知道，此时我们要把点击的是哪一个作为形参，提供对应的入口） =>index形参变量：点击的是谁，就在执行changeBox的时候，把点击这一项的索引传递给我
for (var i = 0; i < list.length; i++) {
list[i].className = "";
divs[i].className = "";
}
list[index].className = "active";
divs[index].className = "active";
}
for (var i = 0; i < list.length; i++) {
//=>list[i] 获取到的LI元素对象（堆，有很多内置的属性，也可以设置自定义属性）
// 我们在每一轮循环的时候，给当前元素对象的堆内存中设置一个自定义属性index，属性值存储当前LI元素对象的索引
list[i].index = i
list[i].onclick = function () {
// 传递当前点击这个LI的索引
// this => 当前点击的这个LI，而我们基于它的自定义属性index，就可以拿到它的索引
changeBox(this.index);
}
}
</script>
</body>
</html>
# 不能直接用i当作形参的原因
for (var i = 0; i < list.length; i++) {
list[i].onclick = function () {
changeBox(i);
}
}
// 这样写不行的原因：点击每一个LI的时候，绑定事件函数中的i都是3（循环结束后i的结果）
/*
i=0 第一轮循环 i++
list[0].onclick = function () {
此处是创建函数，函数存储的是一堆破字符串，我们看到的i，也只是一个字符
“changeBox(i);”
}
i=1 第二轮循环 i++
list[1].onclick = function () {
“changeBox(i);”
}
i=2 第三轮循环 i++
list[2].onclick = function () {
“changeBox(i);”
}
i=3 循环结束
........
手欠点了第二个LI，触发第二个LI绑定的函数
changeBox(i) 此时的i已经是循环结束后的3了
*/