JS role in querySelectorAll

//外部页切换
    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';
        }
    }    

 

 When we write Html page, click on the jump if you encounter an external page and internal pages also need to click during a jump. When writing a simple JS to be captured dom objects will be prone to problems, such as under my outer layer of the page div div. He will be captured, so the effect we write the page click on the toggle js will appear bug.

How to avoid this situation, we can use

querySelectorAll

To solve this problem. By using it to grab div class currently have the same style, you will get for the directivity to the element, thereby circumventing such bug