首页 > 代码库 > JavaScript总结之单击弹出div

JavaScript总结之单击弹出div

2024-07-16 13:47:10   219人阅读

今天也算用了不少手段来实现他们的要求，大概记录一下，下边的代码示例，我全部修改贴出来，争取全部占到自己的代码里就能用。

1、点击同一个div，打开/关闭另一个div。

 1  1 <script type="text/javascript" src="http://www.mamicode.com/jquery-1.11.1.min.js"></script>  2  2 <script type="text/javascript"> 3  3     /*var btnShow=document.getElementById(‘show_detail‘); 4  4     var detail=document.getElementById(‘detail‘); 5  5     btnShow.onclick=function(){ 6  6         if(detail.style.display=="none"){ 7  7             detail.style.display="block" 8  8         }else{ 9  9             detail.style.display="none";10 10                         11 11         }12 12                 13 13     }*/14 14      $(function(){15 15         $("#show_detail").click(function(){16 16             $(‘#detail‘).toggle(‘fast‘);17 17             })18 18         })19 19 </script>

然后是html代码，大概做了个简单的：

 1 <div class="content" style="width:400px;"> 2   <div id="show_detail" align="right" style="margin-right:20px; color:#00F; cursor:pointer;">[详细信息]</div> 3   <div id="detail" align="left" style="display:none; height:150px; overflow:auto; padding:10px;"> 4     <hr /> 5     <br /> 6     <p>弹出框:</p> 7     <p style="line-height:25px;">欢迎访问，有何问题欢迎交流<br /> 8     </p> 9   </div>10   <p style=‘text-align:center‘><b><span style=‘font-size:1.5em‘>&raquo;</span> 返回 <a href="javascript:history.back()">上一层</a></b></p>11 </div>

隐藏部分的也可以，不过显示效果不如下边jquery写的。slow和fast是显示速度，效果还不错。

实现效果：

点击后：

再次点击回复初始。

本想都写一个的。发现这样的话会很长，分着写吧。到时候在写一个索引便好。

 


联系
我们