基于jquery實(shí)現(xiàn)點(diǎn)擊鏈接彈出層效果，其基本實(shí)現(xiàn)原理是這樣的：jquery操作DOM元素。對(duì)層樣式的設(shè)置。將display:設(shè)置為none;讓層隱藏；對(duì)jq點(diǎn)擊彈出層相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧

jquery實(shí)現(xiàn)點(diǎn)擊鏈接彈出層效果：本例實(shí)現(xiàn)的主要原理：jquery操作DOM元素。對(duì)層樣式的設(shè)置。將display:設(shè)置為none;讓層隱藏；

代碼實(shí)例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn" />
<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="#">出來(lái)層</a> </div>
<div id="divobj"></div>
</div>
</form>
</body>
</html>

以上代碼中，點(diǎn)擊鏈接可以彈出隱藏的層，再點(diǎn)擊任何地方就可以隱藏此層。

本段代碼簡(jiǎn)單易懂，寫(xiě)的不好還請(qǐng)各位大俠見(jiàn)諒，希望本文分享能夠給大家?guī)?lái)幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)滑動(dòng)開(kāi)關(guān)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)滑動(dòng)開(kāi)關(guān)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
用jQuery實(shí)現(xiàn)的智能隱藏、滑動(dòng)效果的返回頂部代碼
這篇文章主要介紹了用jQuery實(shí)現(xiàn)的智能隱藏、帶滑動(dòng)效果的返回頂部代碼,非常實(shí)用,需要的朋友可以參考下
2014-03-03
jquery插件實(shí)現(xiàn)代碼雨特效
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)代碼雨特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
深入學(xué)習(xí)jQuery中的data()
大家應(yīng)該都會(huì)有這樣一種感覺(jué)，data函數(shù)在jQuery中看起來(lái)很不起眼, 就像沙灘上一顆平凡的沙子, 但仔細(xì)一瞅, 卻驚訝的發(fā)現(xiàn)data是jQuery中無(wú)比重要的一環(huán), 甚至jQuery中各種事件都基于此。下面就來(lái)詳細(xì)深入的學(xué)習(xí)下jQuery中的data()，感興趣的朋友們可以參考借鑒。
2016-12-12
jQuery 動(dòng)態(tài)酷效果實(shí)現(xiàn)總結(jié)
jQuery是一個(gè)優(yōu)秀的JavaScript框架，可以很好的解決不同瀏覽器兼容的問(wèn)題，尤其是在ASP.NET MVC下，它的作用更加的凸顯。
2009-12-12
這篇文章主要介紹了Jquery實(shí)現(xiàn)瀑布流布局的方法,可實(shí)現(xiàn)圖片的動(dòng)態(tài)加載功能,且代碼備有詳細(xì)注釋便于理解,需要的朋友可以參考下
2015-07-07