首页 > 代码库 > JavaScript总结之单击弹出div
JavaScript总结之单击弹出div
今天也算用了不少手段来实现他们的要求,大概记录一下,下边的代码示例,我全部修改贴出来,争取全部占到自己的代码里就能用。
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‘>»</span> 返回 <a href="javascript:history.back()">上一层</a></b></p>11 </div>
隐藏部分的也可以,不过显示效果不如下边jquery写的。slow和fast是显示速度,效果还不错。
实现效果:
点击后:
再次点击回复初始。
本想都写一个的。发现这样的话会很长,分着写吧。到时候在写一个索引便好。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。