a.jsp(需要提前导入jquery.min.js 地址：http://www.cnblogs.com/zhouerba/p/7358069.html )
本例中样式很简单，就是变色，设置了一个class，叫active。此方法不同于a的visited表示访问过的状态（只要访问过一直都会是这个颜色），也不同与a的active表示单击时（一瞬间，单击后马上又恢复原样）的状态，a的hover是鼠标移至的样式设定，一旦鼠标移出也会恢复颜色。
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <style> a{text-decoration:none;} #table1 a { color:#7FFFD4; } #table1 a.active{ color:#ffff00; } </style> <script src="/Test/js/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> $(function(){ $("#table1 a").click(function() { //$("#tablemonth a").removeClass("active");//方法1 //方法2注意层次关系，因为本例中<a>标签式在一个table里的td里，所以同级的<a>是父节点的兄弟节点的子节点。 $(this).parent().siblings().children('a').removeClass('active');//方法2 $(this).addClass('active'); }); }); </script> </head> <body> <TABLE id="table1"> <TR> <TD width="100" align="left"><a href="#">11111111 </a> </TD> <TD width="100" align="center"><a href="#">2222222 </a> </TD> <TD width="100" align="right"><a class="active" href="#" > 3333333 </a> </TD> <TD width="20"></TD> </TR> </TABLE> </body> </html>
注意：若<a>标签的打开新页面进行数据处理并传值，以上效果就没有，因为每次传值后再返回此页面都会刷新，会恢复默认状态，此时，可以通过传值的不同类型进行判断，再做样式的添加和删除
eg：<a id="thismonth" href="/项目名称/servlet/处理数据页面?method="a">1111111 </a>
<a id="premonth" href="/项目名称/servlet/处理数据页面?method="b">2222222 </a>
<a id="ppremonth" href="/项目名称/servlet/处理数据页面?method="c">3333333 </a>
jsp代码中嵌入了java代码
<% %>中间嵌套的是java代码
<script type="text/javascript" > var ppremonth=document.getElementById("ppremonth"); var premonth=document.getElementById("premonth"); var thismonth=document.getElementById("thismonth"); </script> <% String method=(String)request.getParameter("method"); //System.out.println("award.jsp method="+method); if(method.equals("a")){%> <script type="text/javascript"> thismonth.setAttribute("class","active"); premonth.setAttribute("class",""); ppremonth.setAttribute("class",""); </script> <%} else if(method.equals("b")){%> <script type="text/javascript"> premonth.setAttribute("class","active"); thismonth.setAttribute("class",""); ppremonth.setAttribute("class",""); </script> <%} else if(method.equals("c")){%> <script type="text/javascript"> ppremonth.setAttribute("class","active"); thismonth.setAttribute("class",""); premonth.setAttribute("class",""); </script> <%} else{}%>