简单的TAB切换

思路：
1.为每个小块块【1，2，3，4】添加点击事件
2.把所有小块的颜色变成粉色
3.把点击的小块块颜色变成紫色
4.把大方块对应的样视变成block,其他隐藏

注意：循环先执行，事件触发的时候才执行。
**

错误的写法

**
下面是错误的代码

    <div class="big">
        <div class="tab" id="alltab">
            <div class="tabone">1</div>
            <div class="tabone">2</div>
            <div class="tabone">3</div>
            <div class="tabone">4</div>
        </div>
        <div class="content" id="allcontent">
            <div class="Cone">11111111111</div>
            <div class="hide">222222222</div>
            <div class="hide">33333333333</div>
            <div class="hide">44444444</div>
        </div>
    </div>

    function my$(id){
        return document.getElementById(id);
    }
    var tabobj = my$("alltab").getElementsByTagName("div");
    var conobj = my$("allcontent").getElementsByTagName("div");
    console.log(conobj[2].className);
    for(var i=0;i<tabobj.length;i++){
        
        tabobj[i].onclick = function(){
            for(var j=0;j<tabobj.length;j++){
                tabobj[j].style.backgroundColor = "pink";
                conobj[j].className = "hide";
            }
            this.style.backgroundColor = "purple";
            conobj[i].className = "Cone";     
        }
    }

可以发现点击时程序报错，因为最后一行：conobj[i].className = “Cone”;这一行代码，conobj[i]是undefined。那么为什么是undefined的呢？原因就是for循环是先执行的，事件是触发的时候才执行，所以最外面的for循环最先开始执行，当点击小方块的时候，事件被触发，然而这时的i已经变成“4”。超过了数组的范围，所以找不到这个元素。
我们要做的就是在没有点击小方块之前给小方块存上索引值。
索引值就要用到setAttribute()，添加属性。

下面是正确代码
-----------------------------------------------------分割线--------------------------------------------------------

    function my$(id){
        return document.getElementById(id);
    }
    var tabobj = my$("alltab").getElementsByTagName("div");
    var conobj = my$("allcontent").getElementsByTagName("div");
   
    for(var i=0;i<tabobj.length;i++){
        tabobj[i].setAttribute("index",i);
        tabobj[i].onclick = function(){
            for(var j=0;j<tabobj.length;j++){
                tabobj[j].style.backgroundColor = "pink";
                conobj[j].className = "hide";
            }
            this.style.backgroundColor = "purple";
            var a = this.getAttribute("index");
            conobj[a].className = "Cone";   
        }
    }

用setAttribute()给元素添加一个索引属性,再获取就可以了。