美文网首页
tab切换和模态框

tab切换和模态框

作者: 向前冲冲的蜗牛 | 来源:发表于2017-09-30 02:12 被阅读0次

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

相关文章

网友评论

      本文标题:tab切换和模态框

      本文链接:https://www.haomeiwen.com/subject/rpbwextx.html