1. <body>
    2.    <div id="tabBox">
    3.       <ul id="navBox">
    4.          <li class="active">睡觉</li>
    5.          <li>学习</li>
    6.          <li>运动</li>
    7.       </ul> 
    8.       <div  class="active">学习快乐</div>
    9.       <div  class="active">快乐</div>
    10.       <div  class="active">乐</div>
    11.    </div>      
    12. </body>
    1. var tabBox=document.getElmentById('tabBox');
    2. var tabList = tabBox.getElementsByTagName('div');
    3. var navBox = document.getElementById('navBox');
    4. var navList = navBox.getElementsByTagName('li');
    6. //解决办法一：自定义属性解决办法 
    7. //循环三个li，给每一个li都绑定点击事件
    8. for (var i = 0; i < navList.length; i++) {
    9.     // navList[i] : 当前循环下我们要操作的那个LI（I变量存储的值是我们需要获取指定元素的索引）
    10.     // 在循环给每个LI绑定点击事件的时候，我们给每一个LI（元素对象）设置一个自定义属性MY-INDEX，属性值存储的是当前LI的索引
    11.     navList[i].myIndex = i;
    12.     navList[i].onclick = function () {
    13.         // 我想用的是点击这个LI的索引，但是I不是
    14.         // THIS是当前点击的这个元素LI;THIS.MY-INDEX获取的就是之前绑定在元素自定义属性上的索引值;
    15.         changeTab(this.myIndex);
    16.     }
    17. }
    21. // 闭包解决方案
    22. /* for (var i = 0; i < navList.length; i++) {
    23.     navList[i].onclick = (function (i) {
    24.         return function () {
    25.             changeTab(i);
    26.         }
    27.     })(i);
    28. } */
    30. // ES6中的LET解决方案
    31. /* for (let i = 0; i < navList.length; i++) {
    32.     navList[i].onclick = function () {
    33.         changeTab(i);
    34.     }
    35. } */
    38. //========================================不行的
    39. /* for (var i = 0; i < navList.length; i++) {
    40.     navList[i].onclick = function () {
    41.         changeTab(i);
    42.     }
    43. } */
    44. /*
    45.  * 只有JS代码加载完成才能看到页面，只有看到页面用户才能点击 
    46.  *   加载到循环这个代码了 i=0 i<3 i++
    47.  *   i=0  navList[0].onclick=function(){...} 绑定事件的时候方法没有执行，点击第一个LI的时候它才执行 i++ =>1
    48.  *   i=1  navList[1].onclick=function(){...}  i++ =>2
    49.  *   i=2  navList[2].onclick=function(){...}  i++ =>3
    50.  *   3<3 不同过，循环结束，此时i已经是3了
    51.  * 
    52.  *   循环结束看到了页面，用户去点击了某一个页卡，接下来开始执行绑定的方法，方法中遇到了一个I，但是此时I已经是循环结束后的3了
    53.  */
    56. // 封装一个函数实现选项卡的切换
    57. // clickIndex:创建函数的时候还不知道点的是谁，所以定义一个入口clickIndex（存储点击这一项的索引），执行方法的时候把点击这一项的索引传递进来即可
    58. function changeTab(clickIndex) {
    59.     // 1.先让所有的LI和DIV都没有选中的样式
    60.     for (var i = 0; i < navList.length; i++) {
    61.         navList[i].className = '';
    62.         tabList[i].className = '';
    63.     }
    64.     // 2.点击的是谁就给谁加选中样式类
    65.     navList[clickIndex].className = 'active';
    66.     tabList[clickIndex].className = 'active';
    67. }