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{}%>