javascript控制层显示或隐藏的方法

这篇文章主要介绍了javascript控制层显示或隐藏的方法,涉及javascript操作页面元素样式的相关技巧,非常简单实用,需要的朋友可以参考下

本文实例讲述了javascript控制层显示或隐藏的方法。分享给大家供大家参考。具体实现方法如下：

1. <html> 
2. <head> 
3. <title>中国风</title> 
4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
5. </head> 
6. <script language="JavaScript"> 
7. function showLay1(){ 
8. lay1.style.visibility="visible"; 
9. lay2.style.visibility="hidden"; 
10. lay3.style.visibility="hidden"; 
11. } 
12. function showLay2(){ 
13. lay1.style.visibility="visible"; 
14. lay2.style.visibility="visible"; 
15. lay3.style.visibility="hidden"; 
16. } 
17. function showLay3(){ 
18. lay1.style.visibility="visible"; 
19. lay2.style.visibility="visible"; 
20. lay3.style.visibility="visible"; 
21. } 
22. </script> 
23. <body> 
24. <div id="lay1" style="position:absolute; left:60px; top:30px; width:250px; height:200px; index:1; visibility:visible">这是第一层内容,它的背景是透明的</div> 
25. <div id="lay2" style="position:absolute; left:60px; top:30px; width:250px; height:200px; index:2; visibility:hidden; background-color:silver">这是第二层内容,它的背景是灰色的</div> 
26. <div id="lay3" style="position:absolute; left:60px; top:30px; width:250px; height:200px; index:3; visibility:hidden"><br><br><br>这是第三层内容,它的背景是透明的</div> 
27. <form id="form1" style="position:absolute; left:70px; top:250px;"> 
28. <input type="button" value="第一层" onclick="showLay1()"> 
29. <input type="button" value="第二层" onclick="showLay2()"> 
30. <input type="button" value="第三层" onclick="showLay3()"> 
31. </form> 
32. </body> 
33. </html> 

希望本文所述对大家的javascript程序设计有所帮助。