事件的应用（实现TAB标签、模态框）

应用一.实现TAB效果

1.效果一：点击不同的TAB，TAB被选中

选中全部li

查看tabs选中的效果

说明：选中的tabs为空，因为将js部分放在了head中，这时下面的body还没加载出来，js去选中元素，自然是空的，这也是为什么不建议把js放在页面前面

js部分放在底部

放在页面后，可实现效果，元素被选中

选择直接子元素的li

绑定事件后，函数需要做的事情：
1.将邻居的active class去掉（或者将全部的active去掉）
2.给自己加上active的class

效果二：选中相应TAB，展示对应panel

说明：获取相邻元素序号。利用forEach遍历对每个选中的li进行事件绑定，绑定的事情是当点击时，将所有li的active标签去除，这里再使用一次遍历可以实现。去除后，对当前点击的标签，也就是this添加active标签。图中左边部分为尝试获取当前选中元素的序号，这样就可以将这个序号对应到下面的panel上，将对应序号的panel展示出来。

借用数组的方法

借用数组下的indexOf这个方法，但作用域是在tabs中，返回this的index

HTML不规范出错

最终效果：

最终效果

实现功能所需两个重要知识点：
1.数组的遍历
2.通过添加class名实现效果的转换

应用二.实现模态框

通过open标签控制是否展示模态框

可以给模态框加一个class，让它的display为block，实现展示。这里要注意一个权重问题，如果别的地方对模态框的display有控制，可能会影响

最终效果：

最终效果