<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .on{ background: green; color:#fff; } body div{ background: cornflowerblue; 100px; height: 100px; display: none; alignment-baseline: auto; } </style> </head> <body> <input type="button" class="on" value="书籍" /> <input type="button" value="招生" /> <input type="button" value="学校" /> <div style="display: block;" >1111111111</div> <div>2222222222</div> <div>3333333333333</div> </body> </html> <script type="text/javascript"> var adiv=document.getElementsByTagName("div") var abtn=document.getElementsByTagName("input"); for (var i=0;i<abtn.length;i++) { abtn[i].index=i; abtn[i].onmouseover=function() { for(var i=0;i<abtn.length;i++) { abtn[i].className=''; adiv[i].style.display ='none'; } this.className='on'; adiv[this.index].style.display='block'; } } </script>