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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容