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>

   

  效果:

  Html : 点击按钮弹出输入框,再次点击进行隐藏_第1张图片

 

  END

转载于:https://www.cnblogs.com/finalanddistance/p/9181792.html

你可能感兴趣的:(xhtml,javascript)