<html> <head> <meta charset="utf-8"> <script type="text/javascript" src="jquery-1.9.1.js"></script> </head> <body> <script type="text/javascript"> $(document).ready(function(){ //触发class = c 的点击事件 $(".c").click(function(){ checkDiv($(this)); }); //给DOM绑定点击事件 $(document).bind(‘click‘,function(e){ //获取当前点击元素的class var v_id = $(e.target).attr(‘class‘); //如果class != c 隐藏DIV if(v_id != ‘c‘){ $("#show").hide(); } }) }); //显示被隐藏的DIV function checkDiv(obj){ //获取当前点击的位置 var offset = obj.offset(); //给要显示的DIV设置左边距 var left = offset.left; var intleft = parseInt(left) + 15; //给要显示的DIV设置上边距 var top = offset.top; var inttop = parseInt(top) +15; $("#show").show(); $("#show").css({ "background-color":‘#33ee33‘, "position":‘absolute‘, "z-index":10, "top":inttop, "left":intleft }); } </script> <div id="big"> <div> aaaaaaaaaaaaaaaaaaaaaaaaaa<br> bbbbbb<span class="c">点击</span>bbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbb<span class="c">点击</span>bbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbb<span class="c">点击</span>bbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbb<span class="c">点击</span>bbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbb<br> </div> <div id="show" style="display:none;border:1px solid red;"> 要显示的内容 </div> </div> </body> </html>
原文:http://blog.csdn.net/itnobody/article/details/18351937