//外部页切换 var clickme=document.getElementById(‘navbox‘).getElementsByTagName(‘button‘); var box=document.getElementById(‘itembox‘).querySelectorAll(‘.boxStyle‘); for(var i=0;i<clickme.length;i++){ clickme[i].index=i; clickme[i].onclick=function(){ for(var i=0;i<clickme.length;i++){ clickme[i].className=‘navbtn‘; box[i].style.display=‘none‘; } this.className=‘navbtn active‘; box[this.index].style.display=‘block‘; } } //内部页切换 var databox=document.getElementById(‘b1‘).getElementsByTagName(‘div‘); var message=document.getElementById(‘b2‘).getElementsByTagName(‘div‘); for(var i=0;i<databox.length;i++){ databox[i].index=i; databox[i].onclick=function(){ for(var i=0;i<databox.length;i++){ databox[i].className=‘littlebox‘; message[i].style.display=‘none‘; } this.className=‘littlebox actives‘; message[this.index].style.display=‘block‘; } }
在我们编写Html页面时,如果遇到外部页面点击跳转并且内部页面也需要点击跳转时。单纯编写JS时所要抓取的dom对象就会容易出现问题,如我的外层页面之下的div中的div。都会被捕捉到,这样我们编写出的js点击切换页面的效果就会出现bug。
如何规避这种情况,我们可以使用
querySelectorAll
来解决这个问题。通过使用它来抓取当前拥有同样class样式的div,就会针对指向性的获取到该元素,从而规避这类bug
原文地址:https://www.cnblogs.com/CWJDD/p/11030215.html
时间: 2024-10-11 22:00:37