<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding:0px; margin:0px;} .wrapper div{display:none; width:200px; height:250px; border:10px solid #FF3; } div.start{text-align:center; display:block; width:200px; border:5px solid #F00; } .active{ background-color:orange;} </style> </head> <body> <div class='start'>辣鸡游戏</div> <div class='wrapper'> <button>第一关</button> <button>第二关</button> <button>第三关</button> <button>第四关</button> <div class='content'>你就是个大傻逼</div> <div class='content'>辣鸡</div> <div class='content'>废物</div> <div class='content'>蠢狗</div> </div> <script> var btn = document.getElementsByTagName('button'); var div = document.getElementsByClassName('content'); for(var i =0; i<btn.length; i++){ (function(n){ btn[n].onclick = function(){ for(var j = 0; j < btn.length; j++){ btn[j].className=''; div[j].style.display='none'; } this.className='active'; div[n].style.display='block'; div[n].p } }(i)) } </script> </body> </html>
