<html> <head> <meta charset = "utf-8"> <title></title> <style type="text/css"> div { width: 1280px; height: 100px; margin: 0 auto; margin-left: 100px; } li { width: 100px; height: 100px; float: left; margin-left: 10px; border: 1px solid red; line-height: 100px; text-align: center; font-size: 20px; } .a1:hover { border-top: 1px solid green; border-bottom: 1px solid green; } .a2:hover { border-left: 1px solid green; border-right: 1px solid green; } .inter { width: 550px; height: 200px; background-color: pink; margin-left: 150px; text-align: center; line-height: 200px; font-size: 100px; } </style> </head> <body> <div> <ul> <li class = "a1" id = "b1" onmouseover = "interface(0)"></li> <li class = "a2" id = "b2" onmouseover = "interface(1)"></li> <li class = "a2" id = "b3" onmouseover = "interface(2)"></li> <li class = "a2" id = "b4" onmouseover = "interface(3)"></li> <li class = "a1" id = "b5" onmouseover = "interface(4)"></li> </ul> </div> <div class = "inter" id = "home"> </div> <script type="text/javascript"> function $(id){ return document.getElementById(id); } var a = new Array("第一个盒子",'第二个盒子','第三个盒子','第四个盒子','第五个盒子'); var b = new Array('b1','b2','b3','b4','b5'); function interface(canshu){ for(var i = 0;i < 5;i++) { $(b[i]).innerHTML = ""; } $(b[canshu]).innerHTML = a[canshu]; $('home').innerHTML = a[canshu]; } </script> </body> </html>