在表格菜单中，用JavaScript实现随着鼠标的滚动改变行的颜色

来源：互联网发布：网络培训的意义编辑：程序博客网时间：2024/06/05 03:49

先上个截图吧！看的更明白点

首先要有表格：在html的body中写上如下代码：

其实就是一张表格，有14行，每行都有一个图片加上一个超级链接

<table width='100%' height='100%' border='1' cellspacing='0' cellpadding='1'><tr id='menu1'><td><a href='getnexttree.action?id=1' target='menuTree' onclick='changeColor(1)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/1.gif' />  我的流程</a></td></tr><tr id='menu2'><td><a href='getnexttree.action?id=2' target='menuTree' onclick='changeColor(2)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/2.gif' />  我的文档</a></td></tr><tr id='menu3'><td><a href='getnexttree.action?id=3' target='menuTree' onclick='changeColor(3)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/3.gif' />  我的通信</a></td></tr><tr id='menu4'><td><a href='getnexttree.action?id=4' target='menuTree' onclick='changeColor(4)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/4.gif' />  我的人事</a></td></tr><tr id='menu5'><td><a href='getnexttree.action?id=5' target='menuTree' onclick='changeColor(5)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/5.gif' />  我的任务</a></td></tr><tr id='menu6'><td><a href='getnexttree.action?id=6' target='menuTree' onclick='changeColor(6)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/6.gif' />  我的资产</a></td></tr><tr id='menu7'><td><a href='getnexttree.action?id=7' target='menuTree' onclick='changeColor(7)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/7.gif' />  我的会议</a></td></tr><tr id='menu8'><td><a href='getnexttree.action?id=8' target='menuTree' onclick='changeColor(8)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/8.gif' />  我的商务</a></td></tr><tr id='menu9'><td><a href='getnexttree.action?id=9' target='menuTree' onclick='changeColor(9)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/9.gif' />  我的助手</a></td></tr><tr id='menu10'><td><a href='getnexttree.action?id=10' target='menuTree' onclick='changeColor(10)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/10.gif' />  信息中心</a></td></tr><tr id='menu11'><td><a href='getnexttree.action?id=11' target='menuTree' onclick='changeColor(11)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/11.gif' />  系统管理</a></td></tr><tr id='menu12'><td><a href='getnexttree.action?id=12' target='menuTree' onclick='changeColor(12)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/12.gif' />  图形报表</a></td></tr><tr id='menu13'><td><a href='getnexttree.action?id=13' target='menuTree' onclick='changeColor(13)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/13.gif' />  我的协作</a></td></tr><tr id='menu14'><td><a href='getnexttree.action?id=14' target='menuTree' onclick='changeColor(14)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/14.gif' />  我的相册</a></td></tr></table>

然后再head中加上如下javascript代码：

<script type="text/javascript" src="index_files/leftMenuFiles/jquery-1.4.4.js"></script><script type="text/javascript">$(function() {$("table tr").hover(function() {$(this).css("background-color", "#B2E1F1");}, function() {$(this).css("background-color", "");});});

这里用到了jquery框架，所以要导入这个文件

然后当你的鼠标在这14行滚动时，就会使这一行的颜色改变成你想要的颜色，

当你的鼠标离开时，颜色也就消失了

还有一点，当你单击了某一行时，就算你的鼠标离开，这一行的也会显示一种颜色，这里我用的是同一种颜色，其代码如下：加在javascript中

function changeColor(a) {for ( var i = 1; i <= 14; i++) {document.getElementById("menu" + i).className = "Normal";}document.getElementById("menu" + a).className = "Current";}

然后再写上一句CSS代码：

<style type="text/css">.Normal{background:none;  /*没选择的不显示任何颜色*/}.Current{background: #B2E1F1; /*选择了的显示某一种颜色*/}</style>

其效果如下

注解：当鼠标停在上面时，其实都有应该有鼠标的手型在上面的，但是由于截图，就显示不了啦。

整个页面的代码如下：(还有其他一些知识) 是JSP页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>一级菜单树</title>    <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><script type="text/javascript" src="index_files/leftMenuFiles/jquery-1.4.4.js"></script><script type="text/javascript">$(function() {$("table tr").hover(function() {$(this).css("background-color", "#B2E1F1");}, function() {$(this).css("background-color", "");});});function changeColor(a) {for ( var i = 1; i <= 14; i++) {document.getElementById("menu" + i).className = "Normal";}document.getElementById("menu" + a).className = "Current";}</script><style type="text/css">body{MARGIN-TOP: 2px;MARGIN-LEFT: 2px;margin-right: 2px;margin-bottom: 2px;FONT-FAMILY: verdana; FONT-SIZE: 14px;}table{ border-collapse:collapse;}tr{background-color: #F0F5FF;cursor: pointer;FONT-FAMILY: verdana; FONT-SIZE: 14px;}td{ PADDING-LEFT: 10px;border:solid 1px #719BC3;}a{color: black;outline: none; /*去掉超级链接的虚线框*/}a:link,a:visited{ text-decoration:none;  /*超链接无下划线*/}a:hover{ text-decoration:underline;  /*鼠标放上去有下划线*/}a:active {star:expression(this.onFocus=this.blur()); /*去掉超级链接的虚线框*/} .Normal{background:none;}.Current{background: #B2E1F1;}</style>  </head>    <body>    <table width='100%' height='100%' border='1' cellspacing='0' cellpadding='1'><tr id='menu1'><td><a href='getnexttree.action?id=1' target='menuTree' onclick='changeColor(1)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/1.gif' />  我的流程</a></td></tr><tr id='menu2'><td><a href='getnexttree.action?id=2' target='menuTree' onclick='changeColor(2)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/2.gif' />  我的文档</a></td></tr><tr id='menu3'><td><a href='getnexttree.action?id=3' target='menuTree' onclick='changeColor(3)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/3.gif' />  我的通信</a></td></tr><tr id='menu4'><td><a href='getnexttree.action?id=4' target='menuTree' onclick='changeColor(4)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/4.gif' />  我的人事</a></td></tr><tr id='menu5'><td><a href='getnexttree.action?id=5' target='menuTree' onclick='changeColor(5)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/5.gif' />  我的任务</a></td></tr><tr id='menu6'><td><a href='getnexttree.action?id=6' target='menuTree' onclick='changeColor(6)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/6.gif' />  我的资产</a></td></tr><tr id='menu7'><td><a href='getnexttree.action?id=7' target='menuTree' onclick='changeColor(7)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/7.gif' />  我的会议</a></td></tr><tr id='menu8'><td><a href='getnexttree.action?id=8' target='menuTree' onclick='changeColor(8)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/8.gif' />  我的商务</a></td></tr><tr id='menu9'><td><a href='getnexttree.action?id=9' target='menuTree' onclick='changeColor(9)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/9.gif' />  我的助手</a></td></tr><tr id='menu10'><td><a href='getnexttree.action?id=10' target='menuTree' onclick='changeColor(10)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/10.gif' />  信息中心</a></td></tr><tr id='menu11'><td><a href='getnexttree.action?id=11' target='menuTree' onclick='changeColor(11)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/11.gif' />  系统管理</a></td></tr><tr id='menu12'><td><a href='getnexttree.action?id=12' target='menuTree' onclick='changeColor(12)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/12.gif' />  图形报表</a></td></tr><tr id='menu13'><td><a href='getnexttree.action?id=13' target='menuTree' onclick='changeColor(13)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/13.gif' />  我的协作</a></td></tr><tr id='menu14'><td><a href='getnexttree.action?id=14' target='menuTree' onclick='changeColor(14)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/14.gif' />  我的相册</a></td></tr></table>    </body></html>