使用JS实现展开及收缩效果 博客分类: javaScript技术 工作HTML
程序员文章站
2024-03-23 15:38:22
...
希望给点评论什么的,也便于本人重新编辑该文章,别拍拍屁股走人啊!哈哈!
HTML网页中div如何挡住select,有好多需求中提出这样的问题。再三研究并寻找解决方法,最后从网上搜索到这样的信息:说是可以用iframe做底,挡住select,也就达到了div挡住select的效果。
于是本人喜出望外,急于完成工作任务,查了不少资料,也调试了很长时间,最后还真好用了。
这两天空闲时间就将自己实现该功能的代码贴出来供大家参考,以便更快捷的找到问题的突破口。下面就是实现用户信息录入页面时的源代码:
HTML网页中div如何挡住select,有好多需求中提出这样的问题。再三研究并寻找解决方法,最后从网上搜索到这样的信息:说是可以用iframe做底,挡住select,也就达到了div挡住select的效果。
于是本人喜出望外,急于完成工作任务,查了不少资料,也调试了很长时间,最后还真好用了。
这两天空闲时间就将自己实现该功能的代码贴出来供大家参考,以便更快捷的找到问题的突破口。下面就是实现用户信息录入页面时的源代码:
<html> <head> <title>用户信息录入页面</title> <script type="text/javascript"> function setContent(flag) { var content1 = document.getElementById('menu'); var content2 = document.getElementById('back'); if (flag){ content1.style.display = "block"; content2.style.display = "block"; content2.style.width = content1.offsetWidth; content2.style.height = content1.offsetHeight; content2.style.top = content1.style.top; content2.style.left = content1.style.left; content2.style.zIndex = content1.style.zIndex - 1; } else { content1.style.display = "none"; content2.style.display = "none"; } } </script> </head> <body> <legend ACCESSKEY=C>请认真填写您的用户信息及资料:<a href="#" onclick="setContent(true)">展开</a> <a href="#" onclick="setContent(false)">收起</a> </legend> <div style="z-index:3;text-align:left"> <legend ACCESSKEY=A>国 籍:</legend> <Select name="city"> <option value="1">请选择国籍</option> <option value="2">中国</option> <option value="3">美国</option> <option value="4">俄罗斯</option> <option value="5">日本</option> <option value="6">朝鲜</option> <option value="7">韩国</option> <option value="7">新加坡</option> <option value="7">加拿大</option> <option value="7">澳大利亚</option> <option value="7">法国</option> </Select> </div> <fieldset id="menu" style="z-index:999;width:500;overflow-x:auto;height:100;overflow-y:auto;position:absolute;display:none;border:1px dotted #6699FF;background:#E5F0FF"> <P> <label ACCESSKEY=E> <input type=radio name="zjlx" value="152628198307095678">身份证 </label> <label ACCESSKEY=F> <input type=radio name="zjlx" value="152628198307095678">出国护照<br> </label> <label ACCESSKEY=H> 用户名: <input type=text name="userName"> <br> </label> <label ACCESSKEY=M> 密 码: <input type=text name="userName"> <br> </label> <label ACCESSKEY=N> E_mail: <input type=text name="userName"> <br> </label> </P> </fieldset> <iframe id="back" src="" scrolling="no" frameborder="0" style="position:absolute;top:0px;left:0px;display:none"> </iframe> </body> </html>
上一篇: sizeof关键字使用方法及实例演示