选项卡制作过程中的问题：
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>