点击切换div

2020-12-19 09:30:36 阅读：213 来源： 互联网

标签：index tabBox 点击 changeTab 切换 onclick var div tabList

最近在做一些小练习，今天做的是很简单的一个点击切换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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

点击切换div

onclick获取当前元素的索引值