<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload=function(){ var oDiv=document.getElementById('div1'); var bDiv=oDiv.getElementsByTagName('input'); var cDiv=oDiv.getElementsByTagName('div'); for(var i=0;i<bDiv.length;i++){ bDiv[i].index=i; bDiv[i].onclick=function(){ for(var i=0;i<bDiv.length;i++) { bDiv[i].className=''; cDiv[i].style.display='none'; } this.className='active'; cDiv[this.index].style.display='block'; }; } } </script> <style> #div1 .input{ float: left;} #div1>div{ border: solid 1px #008000 ; width: 100px; height: 150px; display: none;} .active{background-color: yellow;} </style> </head> <body> <div id="div1"> <input type="button" value="数学" class="active"/> <input type="button" value="语文" /> <input type="button" value="英语" /> <input type="button" value="科学" /> <div style="display: block;">我是数学</div> <div>我是语文</div> <div>我是英语</div> <div>我是科学</div> </div> </body> </html>
这是比较常见的选项卡的一个例子
这个作业浪费时间很长
做这个作业之前一定要先理解各个函数之间的逻辑关系
bDiv[i].index=i;是个重点
要知其所以然
这个作业不是做得特别好
是多次的修改才做成的
所以这个页面还是要多做几遍的