實現的是在鼠標懸停在不同鏈接上,在同一位置切換顯示想要顯示的內容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>鼠標懸浮切換顯示</title> <script type="application/javascript"> function ChangeDiv(divId,divName,zDivCount) { for(i=0;i<=zDivCount;i++) { document.getElementById(divName+i).style.display="none"; } document.getElementById(divName+divId).style.display="block"; } </script> </head> <body> <table border=0 cellSpacing=0 cellPadding=0 width="100%"> <tbody> <tr height=44 vAlign=top> <td><a onmouseover="ChangeDiv('0','JKDiv_',2)" href="#">新聞一</a></td> <td bgColor=#ffffff width=1></td> <td ><a onmousemove="ChangeDiv('1','JKDiv_',2)" href="#">新聞二</a></td> <td bgColor=#ffffff width=1></td> <td ><a onmousemove="ChangeDiv('2','JKDiv_',2)" href="#">新聞三</a> </td> </tr> </tbody> </table> <table id="JKDiv_0" style="background-color: #0b4ebf;display:block"> <tbody> <tr> <td>000</td> <td>000</td> <td>000</td> </tr> </tbody> </table> <table id="JKDiv_1" style="background-color:#3071A9;display:none"> <tbody> <tr> <td>111</td> <td>111</td> <td>111</td> </tr> </tbody> </table> <table id="JKDiv_2" style="background-color: #FF0000;display:none"> <tbody> <tr> <td>111</td> <td>111</td> <td>111</td> </tr> </tbody> </table> </body> </html>