<a>标签click事件(单击时添加样式,同时删除其他同级<a>标签样式)

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{}%> 
原文地址:https://www.cnblogs.com/zhouerba/p/7357498.html