时间:2021-07-01 10:21:17 帮助过:21人阅读
jquery实现点击链接弹出层效果:本例实现的主要原理:jquery操作DOM元素。对层样式的设置。将display:设置为none;让层隐藏;
代码实例如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset=" utf-8">
- <meta name="author" content="//www.gxlcms.com" />
- <title>子选择器</title>
- <style type="text/css">
- #choice_list_district{
- height:50px;
- }
- #tab td{
- cursor:pointer;
- }
- #divobj{
- position:absolute;
- width:200px;
- height:200px;
- background:blue;
- border:1px solid block;
- display:none;
- z-index:9999;
- }
- </style>
- <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
- <script type="text/javascript">
- $(function (){
- $("#choice_list_district a").click(function(e){
- if($("#divobj").css("display")=="none"){
- e.stopPropagation();
- var offset=$(e.target).offset();
- $("#divobj").css({top:offset.top+$(e.target).height()+"px",left:offset.left});
- $("#divobj").show();
- }
- else{
- $("#divobj").hide();
- }
- });
- $(document).click(function(event){
- $("#divobj").hide();
- });
- });
- </script>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <div id="choice_list_district"> <a href="#">出来层</a> </div>
- <div id="divobj"></div>
- </div>
- </form>
- </body>
- </html>
以上代码中,点击链接可以弹出隐藏的层,再点击任何地方就可以隐藏此层。
本段代码简单易懂,写的不好还请各位大侠见谅,希望本文分享能够给大家带来帮助。