js选项卡点击失效

之前写了js选项卡的帖子
https://blog.csdn.net/qq_47959958/article/details/122987944?spm=1001.2014.3001.5501

后来添加了一些功能，然后出现了一些bug
具体来说就是当点到第二个li的时候，div中的内容消失了

后来找了半天才排查到原因
这个是代码结构，原先在div1中还嵌套了一个div

这个是我的js代码

<script type="text/javascript">
    window.onload=function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
        var tab_t=document.getElementById('tab_t');
        var tab_t_li=tab_t.getElementsByTagName('li');
        var tab_c=document.getElementById('tab_c');
        var tab_c_li=tab_c.getElementsByTagName('div');
        var len=tab_t_li.length;
        var i=0;
        for(i=0;i<len;i++){
            tab_t_li[i].index=i;
            tab_t_li[i].onclick=function(){
                for(i=0;i<len;i++){
                    tab_t_li[i].className='';
                    tab_c_li[i].className='hide';
                }
                tab_t_li[this.index].className='act';
                tab_c_li[this.index].className='';
            }
        }
    }
    // tab("tab_t","li","tab_c","div","onmouseover");
    </script>

这个代码的逻辑是根据tagname取到元素，当点击到某个标签时就展示对应内容，并隐藏其他的东西。因此，如果第一个div中嵌套了div，js并不会因为它是嵌套在div1中而忽略它，而是会产生一些bug。
因此上述的代码就不生效了。


解决的方法也很简单，因为我只有两个li，所以就全部写了一遍

<script type="text/javascript">
    window.onload=function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
        var tab1=document.getElementById('tab1');
        var tab2=document.getElementById('tab2');
        var l1=document.getElementById('l1');
        var l2=document.getElementById('l2');
        tab1.onclick=function(){
           l1.className='act';
           tab1.className='';
           l2.className='';
           tab2.className='hide';
        }
        
        l1.onclick=function(){
           l1.className='act';
           tab1.className='';
           l2.className='';
           tab2.className='hide';
        }
        
        l2.onclick=function(){
           l2.className='act';
           tab2.className='';
           l1.className='';
           tab1.className='hide';
        }
        }
    </script>