導航條——動態改變導航菜單的背景顏色

1.概述

    在瀏覽一些網站時，當鼠標經過導航菜單某一項時，其背景顏色將切換為其他顏色，實現這種簡單的效果會更吸引瀏覽者的注意。

 

2.技術要點

     本實例主要是應用JavaScript方法來動態改變<td>標簽的背景顏色實現的。當鼠標經過<td>表示的導航菜單時，會觸發onMouseOver事件，然后調用自定義的JavaScript方法改變<td>的背景顏色；當鼠標移出<td>時，會觸發onMouseOut事件，調用自定義的JavaScript方法還原背景顏色為初始值。

    在JavaScript中改變<td>標簽的屬性值時，需要為<td>設置一個id值，然后在JavaScript方法中，根據document對象的getElementById()方法即可獲取單元格對象，接下來就可以修改單元格對象的屬性了。如下代碼所示，展示了如何修改id為td1的單元格的背景顏色。

document.getElementById("td1").style.background="skyblue";   

 

3.具體實現

（1）創建index.jsp頁，編寫鼠標經過事件的JavaScript方法over()和鼠標移出事件的方法out()，在這兩個方法中，修改單元格的背景顏色，關鍵代碼如下：

<script type="text/javascript">
      function over(id){
            document.getElementById(id).style.background="skyblue";  
      }
      function out(id){
            document.getElementById(id).style.background="white";
      }
</script>

（2）在每個導航菜單的<td>標簽中，設置onMouseOver事件調用JavaScript的over()方法，設置onMouseOut事件調用javaScript的out()方法。關鍵代碼如下：

<td width="64" id="td1" onmouseover="over('td1')" onmouseout="out('td1')"><a href="http://www.mingribook.com">明日圖書</a></td>
<td width="64" id="td2" onmouseover="over('td2')" onmouseout="out('td2')"><a href="http://www.mingrisoft.com">明日軟件</a></td>
<td width="64" id="td3" onmouseover="over('td3')" onmouseout="out('td3')"><a href="http://www.mingrisoft.com">關於明日</a></td>
<td width="64" id="td4" onmouseover="over('td4')" onmouseout="out('td4')"><a href="#">購買須知</a></td>
<td width="64" id="td5" onmouseover="over('td5')" onmouseout="out('td5')"><a href="http://www.mingribook.com">聯系我們</a></td>