标签：
选项卡制作过程中的问题：
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>
标签：
原文地址：http://www.cnblogs.com/zhuni/p/4684733.html
