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

Posted 柯南&

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了导航条——动态改变导航菜单的背景颜色相关的知识,希望对你有一定的参考价值。

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>

 

以上是关于导航条——动态改变导航菜单的背景颜色的主要内容,如果未能解决你的问题,请参考以下文章

代码笔记改变导航条标题的颜色为红色

改变导航条标题的颜色为红色

Android - 导航抽屉 - 与动态菜单项重叠的片段

12个用得着的 JQuery 代码片段

常用的几个JQuery代码片段

导航菜单是透明的,但我不知道为什么。我想要一个背景