<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="智能社 - zhinengshe.com"> <meta name="copyright" content="智能社 - zhinengshe.com"> <title>智能社 - www.zhinengshe.com</title> <style> input { 100px; height:30px; line-height:30px; } input.active { background:yellow; } #box div { display:none; 300px; height:300px; background:#ccc; } #box .active { display:block; } </style> <script> window.onload=function (){ var aBtn=document.getElementsByTagName('input'); var oDiv=document.getElementById('box'); var aDiv=oDiv.getElementsByTagName('div'); for (var i=0; i<aBtn.length; i++) { (function (index){ aBtn[index].onclick=function (){ for (var i=0; i<aBtn.length; i++) { aBtn[i].className=''; aDiv[i].className=''; } aBtn[index].className='active'; aDiv[index].className='active'; }; })(i); } }; </script> </head> <body> <input type="button" value="新闻" class="active" /> <input type="button" value="广播" /> <input type="button" value="电影" /> <div id="box"> <div class="active">1111111111111</div> <div>2222222222222</div> <div>3333333333333</div> </div> </body> </html>