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

2018-03-11 本文已影响0人 LouisJ

应用一.实现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展示出来。