• <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{}%> 
  • 相关阅读:
    Linux下常用软件安装(tar bz gz等压缩包的压缩和解压)
    《那些年啊,那些事——一个程序员的奋斗史》五
    IT人士 不能一辈子靠技术生存
    十八年开发经历小结
    《那些年啊,那些事——一个程序员的奋斗史》一
    软件工程及软件项目开发流程
    《那些年啊,那些事——一个程序员的奋斗史》三
    AJAX技术解读
    全程追踪入侵JSP网站服务器
    《C语言程序设计》教学的几点体会
  • 原文地址:https://www.cnblogs.com/zhouerba/p/7357498.html
Copyright © 2020-2023  润新知