点击切换div

2020-12-19 09:30:36 作者：互联网

最近在做一些小练习，今天做的是很简单的一个点击切换div内容的小demo。

onclick获取当前元素的索引值

我想把被点击的当前元素的索引 i 传进我写好的函数里。我查了好些网上的方法，搬运个别的博主整理的帖子吧，里面整理了几个获取onclick当前索引的方法 :方法在这里

在我没看到这个帖子之前，我走的坑：

for(var i =0;i<tabList.length;i++){
        tabList[i].onclick= changeTab(i);  //循环过程中changeTab(i)被调用    
     }

我还用了这种办法……

for(var i =0;i<tabList.length;i++){
        tabList[i].onclick= changeTab(this);  //this传不进去
     }

（这个传this的现在看看也是秀……不知道自己当时怎么想的，说明还是对this的理解不够）

看了一下其他大佬的代码发现，基本上都是要再定义一个变量去把这个索引值 i 赋值给新定义的变量。所以后来我也选择用一个变量“index”来把当前的索引i赋值给index。

<body>
    <div class="tabBox" id="tabBox">
        <ul>
           <li class="active">新闻</li>
             <li>电影</li>
             <li>音乐</li>
         </ul>
            <div class="active">嫦娥五号发射成功</div>
            <div >复仇者联盟四</div>
            <div>杀破狼</div>
    </div>
</body>
<script> 
    window.onload = function(){
    var tabBox = document.querySelector('.tabBox');
    var tabList = tabBox.querySelectorAll('li');
    var divList= tabBox.querySelectorAll('div');
    var index;

    for(var i =0;i<tabList.length;i++){
        tabList[i].onclick= changeTab;     
     }

     function changeTab(){   
        for(var i=0;i<tabList.length;i++){
          tabList[i].className='';    //把所有的class都设置为空
          divList[i].className='';
          if(this.innerHTML == tabList[i].innerHTML) index = i;         
        }    
      tabList[index].className='active';
      divList[index].className='active';
     }
    }
</script>

标签：index,tabBox,点击,changeTab,切换,onclick,var,div,tabList
来源： https://blog.csdn.net/Chachako/article/details/111336758