导航条——动态改变导航菜单的背景颜色

Posted 2020-07-26 柯南&

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>