zoukankan      html  css  js  c++  java
  • Html : 点击按钮弹出输入框,再次点击进行隐藏

      上代码:

      

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>点击按钮弹出输入框</title>
    
    <style>
    
    p{ margin:0; padding:0;}
    
    .login-put {
    
    clear: both;
    
    line-height: 36px;
    
    margin-bottom: 20px;
    
    overflow: hidden;
    
    width: 500px;
    
    }
    
    .login-put label {
    
    color: #8c8686;
    
    float: left;
    
    font-size: 14px;
    
    height: 36px;
    
    line-height: 36px;
    
    text-align: right;
    
    width: 120px;
    
    }
    
    #form1{ float:left; width:320px}
    
    #form1 label {
    
    float: left;
    
    text-align: left;
    
    width: 80px;
    
    }
    
    input {
    
    cursor: pointer;
    
    vertical-align: middle;
    
    }
    
    .login-put #div1 {
    
    padding-left: 120px;
    
    }
    
    .login-put #div1 input {
    
    border: 1px solid #dddddd;
    
    color: #999999;
    
    float: left;
    
    height: 36px;
    
    line-height: 36px;
    
    margin-right: 10px;
    
    padding: 0 5px;
    
    width: 190px;
    
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div class="login-put"><label>点击:</label>
    
    <form id="form1" name="form1" method="post" action="">
    
    <p>
    
    <label>
    
    <script type="text/javascript">
    
    function show()
    
    {
    
    var value = document.getElementById("div1").style.display;
    
    if(value=="none")
    
    {
    
    document.getElementById("div1").style.display="block";
    
    }
    
    else
    
    document.getElementById("div1").style.display="none";
    
    }
    
    </script>
    
    
    <input type="button" value="我是按钮" onClick="show()"/>
    
    <div id="div1" style="display:none">
        <input class="text01" name="" type="text" />
    </div>
    
    </div>
    
    </body>
    
    </html>

       

      效果:

      

      END

  • 相关阅读:
    Spring AOP 注解开发
    AOP的专业术语
    Java自定义注解的实现和应用
    Spring 声明式事务管理
    另一种线程安全机制:在事务管理中起到巨大作用的 ThreadLocal
    MySQL的二级索引
    数据库的范式化和反范式化
    MySQL为表字段添加索引
    mysql索引(二)----如何高效使用索引
    Alexnet网络
  • 原文地址:https://www.cnblogs.com/finalanddistance/p/9181792.html
Copyright © 2011-2022 走看看