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

猜你喜欢

转载自www.cnblogs.com/finalanddistance/p/9181792.html
今日推荐