js实现选项卡思路详解

注意点

1、js中所有的事件绑定都是异步编程的，开始只是给元素的点击胸围绑定了一个方法，但是需要手动点击才会执行这个方法，在此期间，不会干等着，继续下一次循环，当点击的时候循环早已经结束
2、在给元素绑定事件的时候，绑定的这个方法还只是定义的部分，此时方法中存储的都是字符串，我们看到的i只是一个字符
3、当点击的时候，执行对应的绑定方法，形成一个私有的作用域，在A中会使用到变量i，而i不是自己私有的，是上级作用域window下的i，此时windoew下的i已经变为li.length

解决方案

一、使用闭包实现

思路

1、先获取元素 ---> li的集合,div的集合
2、执行单击事件 ---> onclick方法
3、每一个元素都需要单击事件 ---> 在执行事件前进行for循环绑定
4、防止一次性循环完，在执行事件前使用闭包解决 ---> 每循环一次执行以下(function(){ 业务逻辑 }())
5、进行单击事件前，再循环一遍，把所有的class去掉，之后再给当前所点击的li赋值class名
6、之后将div放进循环体跟随li的变化即可

 var li = document.getElementsByTagName('li');
    var div = document.getElementsByTagName('div');

    for (var i = 0; i < li.length; i++) {

        (function(i) {
            li[i].onclick = function() {

                for (var j = 0; j < li.length; j++) {
                    li[j].className = "";
                    div[j].style.display = "none";
                }
                this.className = "active";
                div[i].style.display = "block";

            }
        }(i))

    }

一、自定义属性方式

思路

1、先获取元素 ---> li的集合,div的集合
2、执行单击事件 ---> onclick方法
3、每一个元素都需要单击事件 ---> 在执行事件前进行for循环绑定
4、防止一次性循环完，自定义属性 ---> li[i].index = i;
5、进行单击事件，再循环一遍，把所有的class去掉，之后再给当前所点击的li赋值class名
6、之后将div和当前li的索引相对应

  var li = document.getElementsByTagName('li');
    var div = document.getElementsByTagName('div');
    for (var i = 0; i < li.length; i++) {
        li[i].index = i; //为每个li添加对应的索引index
        li[i].onclick = function() { //循环为每个li添加onclick事件
            for (var i = 0; i < li.length; i++) {
                li[i].className = ''; //循环清空li样式
                div[i].style.display = 'none'; //循环隐藏所有div
            }
            this.className = 'active'; //当前点击的元素样式变成active
            div[this.index].style.display = 'block'; //this.index 获取当前li对应的索引
        }
    }