jquery實現點擊鏈接彈出層效果:本例實現的主要原理:jquery操作DOM元素。對層樣式的設置。將display:設置為none;讓層隱藏;
代碼實例如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.49028c.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>
以上代碼中,點擊鏈接可以彈出隱藏的層,再點擊任何地方就可以隱藏此層。
本段代碼簡單易懂,寫的不好還請各位大俠見諒,希望本文分享能夠給大家帶來幫助。
新聞熱點
疑難解答