<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>div切换</title> <style type="text/css"> .dj{ width: 400px; height: 400px; background-color:#A18325; display:none; } </style> <script type="text/javascript"> window.onload = function (){ var x1=document.getElementById("as"); x1.onmouseover= function (){ var xd1=document.getElementById("dg1"); xd1.style.display='block' var xx1=document.getElementById("dg2"); xx1.style.display='none' } var x2=document.getElementById("bs"); x2.onmouseover= function (){ var xd1=document.getElementById("dg2"); xd1.style.display='block' var xx1=document.getElementById("dg1"); xx1.style.display='none' } } </script> </head> <body> <div style=" 50px; height: 50px;background: #3355dd;" id="as"></div> <div style=" 50px; height: 50px;background: #6622dd;" id="bs"></div> <div class="dj" id="dg1"> <br /> 第一个111111111111</div> <div class="dj" id="dg2"> <br /> 第二个222222222222</div> </body> </html>