@H_403_0@Tab 选项卡切换效果在现如今的网页中，运用的也是比较多的，包括点击切换、滑动切换、延迟切换、自动切换等多种效果，在这篇博文里，我们是通过原生 JavaScript 来实现 Tab 点击切换的效果
@H_403_0@
1. 功能实现
@H_403_0@html 部分
第二个Nian糕
第三个Nian糕
css 部分
a. 获取元素
document.getElementsByTagName 返回的是一个[类数组对象]，可以使用数组的方法对其进行处理，但类数组对象并不具有数组所具有的方法
@H_403_0@b. 给元素绑定点击事件
2. 优化
@H_403_0@a. 获取元素
b. 给每一个 button 元素绑定点击事件
添加index属性，标记是第几个按钮
btnList[i].onclick = function() {
for(var j = 0; j < btnList.length; j++) {
//将所有的按钮样式去掉，块隐藏
btnList[j].style.color = "";
btnList[j].style.backgroundColor = "";
divList[j].style.display = "none";
}
//给点击的按钮添加样式，对应的块显示
this.style.color = "#fff";
this.style.backgroundColor = "#f60";
divList[this.index].style.display = "block";
}
}
@H_403_0@index 返回字符位置，它是被搜索字符串中第一个成功匹配的开始位置，从零开始
@H_403_0@this 是 Javascript 的一个关键字，它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用 this，关于 this 的值，会跟随函数使用场景的不同而发生变化，但是我们只需要记住一个原则就可以了，this 指的是调用函数的那个对象
@H_403_0@在这里 this 指向对应的点击按钮，我们可以通过控制台打印来看到 this 所输出的内容
@H_403_0@
3. Let 命令
@H_403_0@ES 6 中新增了 let 命令，用来声明变量，其用法类似于 var，但是所声明的变量，只在 let 命令所在的代码块内有效
@H_403_0@
var 和 let 声明了两个变量，接着在代码块内外打印这两个变量，可以看到，var 声明的变量返回了正确的值，代码块内打印 let 声明的变量返回了正确的值，而在代码块外打印 let 声明的变量报错，这表明，let 声明的变量只在它所在的代码块有效
@H_403_0@
i 是 var 声明的，在全局范围内都有效，所以全局只有一个变量 i，每一次循环，变量 i 的值都会发生改变，而循环内被赋给数组 a 的 function 在运行时，会通过闭包读到这同一个变量 i，导致最后输出的是最后一轮的 i 的值，也就是 10，而如果使用 let，声明的变量仅在块级作用域内有效，最后输出的是 6
@H_403_0@a. 获取元素
b. 给每一个 button 元素绑定点击事件
