选项卡制作过程中的问题：
1、把所有的input和div应丢在一个大的div中
2、给按钮设置一个选中的颜色是通过class来设置的，通过行间样式让默认的div显示
3、每次点击产生变化时要通过for循环将之前的演示给清空，设置className为空，display为none
4、this的使用.我写的是oBtn[i],这个时候应该涉及到i的作用域的问题，所以一直报错。this就是指当前事件的按钮。
5、下面对应的div是用js给按钮设置一个index的值

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1 div{
            height: 200px;
            width: 100px;
            background: grey;
            border: 1px solid red;
            display: none;
        }
        .active{
            background: yellow;
        }


    </style>
    <script type="text/javascript">
        window.onload = function (){
            var oDiv = document.getElementById('div1');
            var oBtn = oDiv.getElementsByTagName('input');
            var oDiv2 = oDiv.getElementsByTagName('div');
            for(var i=0;i<oBtn.length;i++){
                oBtn[i].index = i;
                oBtn[i].onclick = function () {
                    for(var i=0;i<oBtn.length;i++){
                        oBtn[i].className = '';
                        oDiv2[i].style.display = 'none';
                    }

                  　 this.className = 'active';
                    oDiv2[this.index].style.display = 'block';

                };

            }


        };
    </script>
</head>
<body>
<div id="div1">
<input  class="active" type="button"  value="zhaosheng"/>
<input  type="button"  value="jiaoyu"/>
<input  type="button"  value="chuguo"/>
<input  type="button"  value="peixun"/>

<div style="display: block">zhaosheng</div>
<div>jioayu</div>
<div>chuguo</div>
<div>peixun</div>
</div>

</body>
</html>

 通过闭包的学习，将之前写的代码进行了改进。之前是因为里面函数的i是父级函数的活动对象，当父级函数返回的时候，变量i的值都是4，他们引用的是同一个i。可以同过index来创建一个索引，也可以通过创建另一个匿名函数强制让闭包的行为符合预期。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1 div{
            height: 200px;
            width: 100px;
            background: grey;
            border: 1px solid red;
            display: none;
        }
        .active{
            background: yellow;
        }


    </style>
    <script type="text/javascript">
        window.onload = function (){
            var oDiv = document.getElementById('div1');
            var oBtn = oDiv.getElementsByTagName('input');
            var oDiv2 = oDiv.getElementsByTagName('div');
            for(var i=0;i<oBtn.length;i++)
            {
                !function(num)
                {
                oBtn[num].onclick = function () {
                    for(var i=0;i<oBtn.length;i++){
                        oBtn[i].className = '';
                        oDiv2[i].style.display = 'none';
                    }

                    oBtn[num].className = 'active';
                    oDiv2[num].style.display = 'block';

                };
                }(i);
            }


        };
    </script>
</head>
<body>
<div id="div1">
    <input  class="active" type="button"  value="zhaosheng"/>
    <input  type="button"  value="jiaoyu"/>
    <input  type="button"  value="chuguo"/>
    <input  type="button"  value="peixun"/>

    <div style="display: block">zhaosheng</div>
    <div>jioayu</div>
    <div>chuguo</div>
    <div>peixun</div>
</div>

</body>
</html>