使用JS實現鼠標懸浮切換顯示


實現的是在鼠標懸停在不同鏈接上,在同一位置切換顯示想要顯示的內容
<!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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM