上代码：

　　

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <head>
  6.  
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.  
  9. <title>点击按钮弹出输入框</title>
  10.  
  11. <style>
  12.  
  13. p{ margin:0; padding:0;}
  14.  
  15. .login-put {
  16.  
  17. clear: both;
  18.  
  19. line-height: 36px;
  20.  
  21. margin-bottom: 20px;
  22.  
  23. overflow: hidden;
  24.  
  25. width: 500px;
  26.  
  27. }
  28.  
  29. .login-put label {
  30.  
  31. color: #8c8686;
  32.  
  33. float: left;
  34.  
  35. font-size: 14px;
  36.  
  37. height: 36px;
  38.  
  39. line-height: 36px;
  40.  
  41. text-align: right;
  42.  
  43. width: 120px;
  44.  
  45. }
  46.  
  47. #form1{ float:left; width:320px}
  48.  
  49. #form1 label {
  50.  
  51. float: left;
  52.  
  53. text-align: left;
  54.  
  55. width: 80px;
  56.  
  57. }
  58.  
  59. input {
  60.  
  61. cursor: pointer;
  62.  
  63. vertical-align: middle;
  64.  
  65. }
  66.  
  67. .login-put #div1 {
  68.  
  69. padding-left: 120px;
  70.  
  71. }
  72.  
  73. .login-put #div1 input {
  74.  
  75. border: 1px solid #dddddd;
  76.  
  77. color: #999999;
  78.  
  79. float: left;
  80.  
  81. height: 36px;
  82.  
  83. line-height: 36px;
  84.  
  85. margin-right: 10px;
  86.  
  87. padding: 0 5px;
  88.  
  89. width: 190px;
  90.  
  91. }
  92.  
  93. </style>
  94.  
  95. </head>
  96.  
  97. <body>
  98.  
  99. <div class="login-put"><label>点击：</label>
  100.  
  101. <form id="form1" name="form1" method="post" action="">
  102.  
  103. <p>
  104.  
  105. <label>
  106.  
  107. <script type="text/javascript">
  108.  
  109. function show()
  110.  
  111. {
  112.  
  113. var value = document.getElementById("div1").style.display;
  114.  
  115. if(value=="none")
  116.  
  117. {
  118.  
  119. document.getElementById("div1").style.display="block";
  120.  
  121. }
  122.  
  123. else
  124.  
  125. document.getElementById("div1").style.display="none";
  126.  
  127. }
  128.  
  129. </script>
  130.  
  131. <input type="button" value="我是按钮" onClick="show()"/>
  132.  
  133. <div id="div1" style="display:none">
  134.     <input class="text01" name="" type="text" />
  135. </div>
  136.  
  137. </div>
  138.  
  139. </body>
  140.  
  141. </html>

　　

　　效果：

　　

　　END

Html ： 点击按钮弹出输入框，再次点击进行隐藏的更多相关文章

  1. JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里

    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...

  2. jquery实现点击按钮弹出层和点击空白处隐藏层

    昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn' ...

  3. ExtJs 4.2.1 点击按钮弹出表单的窗口

    初学ExtJs,做项目的时候想做一个这样的效果:点击按钮弹出对话框,之前一直是使用EasyUi来做的, EasyUi里有Dialog,用起来很方便,但是现在转移到ExtJs上后,发现没有Dialog这 ...

  4. 请写出一段JavaScript代码，要求页面有一个按钮，点击按钮弹出确认框。程序可以判断出用

    请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用 户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...

  5. jquery点击按钮弹出图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 点击按钮弹出一个div层

    JQuery弹出层,点击按钮后弹出遮罩层,还有关闭按钮 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...

  7. ASP.NET点击按钮弹出确认对话框方法

    开发asp.net网页应用程序的时候,有些页面的按钮需要增加一个确认对话框,比如: 实现这个功能比较简单,代码这样写: Button.Attributes["onclick"] = ...

  8. Asp.net点击按钮弹出文件夹选择框的实现（网页）

    本文地址:http://www.cnblogs.com/PiaoMiaoGongZi/p/4092112.html 在Asp.net网站实际的开发中,比如:需要实现点击一个类似于FileUpload的 ...

  9. 点击datagrid弹出ldhdialog，点击弹出框的按钮，关闭且刷新datagrid

    datagrid里的js这么写 //点击添加按钮触发 function superadd(title,addurl,gname,width,height) { gridname=gname; crea ...

随机推荐

  1. Android_靠谱的监听软键盘状态的方法

    public class MyActivity extends AppCompatActivity { /** * 当前界面中的软件盘的状态 */private boolean isKeyBoardO ...

  2. linux磁盘与文件管理

    一.硬盘的组成与分区 1.物理组成 *圆形的盘片(主要记录数据的部分) *机械手臂与机械手臂上的磁头(可读写盘片上的数据) *主轴马达,可以转动盘片,让机械手臂的磁头在盘片上写数据. *扇区为最小的物 ...

  3. linu samba服务

    关闭防火墙并且重启网络yum install samba  samba-client samba-commmon -ysystemctl start smb smbclient -L //172.25 ...

  4. JVM调优总结-Xmx -Xms -Xmn -Xss

    堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统下,一般限制在1.5G~2G:64为操作 ...

  5. java多线程(二)

    线程的阻塞状态: 参考java多线程(一)多线程的生命周期图解,多线程的五种状态.     1.1 join(),如果在A线程体里面执行了B线程的join()方法,那么A线程阻塞,直到B线程生命周期结 ...

  6. 多线程编程_CountDownLatch

    CountDownLatch是JAVA提供在java.util.concurrent包下的一个辅助类,可以把它看成是一个计数器,其内部维护着一个count计数,只不过对这个计数器的操作都是原子操作,同 ...

  7. Django 中orm的第一次举荐

    Django ORM :对象--关系--映射 创建Django准备工作: 1.在数据库创建你需要的数据库 2.在项目models里创建模型(就是python写的类,也可以说是python写的数据库) ...

  8. sysbench测试MySQL筛选tps

    log=$1tps_array=`awk -F '[,:]' '{print $4}' ${log}`zero=0 for tps in ${tps_array}do tps=`echo ${tps} ...

  9. 夜神模拟器连不上adb的解决办法

    解决办法: 1.任务管理器里看下,adb.exe以及nox_adb.exe这2个进程有没有在运行?有的话就结束掉 2.找到开发环境的SDK的目录和夜神模拟器的目录,将SDK\platform-tool ...

  10. db2 存储过程参数传递--字段类型转换产生的问题

    修改之前的脚本 select count(*) from dbdk.dtdkg010 A left join DBDK.DTDKG070 D ON D.PAY_NO = A.PAY_NO LEFT J ...