tab切换和模态框

1： 实现如下图Tab切换的功能

image.png
代码地址是：https://jsbin.com/befesa/edit?html,output

其中遇到了一个问题 就是document.querySelectorAll（）与forEach的使用的问题。

使用 document.querySelectorAll（）返回的元素直接使用forEach（）会出错。

其真正的原因是document.querySelectorAll（）返回的是 NodeList ，其实就是一个类数组，但是并不是真正的数组，所以类数组在使用数组的方法的时候会出现问题。
所以解决办法是

image.png
同时对于这个问题在Stackoverflow上也有相应的解答
https://stackoverflow.com/questions/21714754/what-is-the-return-type-of-document-queryselectorall

2：实现下图的模态框功能，点击模态框不隐藏，点击关闭以及模态框以外的区域模态框隐藏

image.png image.png

代码地址：https://jsbin.com/noxacox/edit?html,css,output