弹出div上点击按钮div会自动隐藏问题,已解决

来源:互联网 发布:淘宝卡办理 编辑:程序博客网 时间:2024/05/21 22:45
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
<!--注意这里导入jquery文件-->
  <script type="text/javascript" src="jquery-1.4.4.js"></script>
  <style type="text/css">
.divclass{
width:300px;
height:100px;
background-color:red;
display:none;
}
  </style>

  <script type="text/javascript">
//显示div
function tanchuDiv(){
$("#divId").show(10);
}
//将aaa动态输入文本框,div不隐藏
function inputText(){
$("#inputId").val("aaa");
}
//隐藏div
function hideDiv(){
$("#divId").hide(10);
}

  </script>
 </head>

 <body>
  <input type="button" value="弹出div"  onclick="tanchuDiv()">
  <div class="divclass" id="divId">
  <form action ="" method="post">
<table>
<tr><td>
<input type="text" id="inputId"/>
</td></tr>
<tr><td>
<!-- 注意:因为该按钮是在form中,所以要想div不自动隐藏,就应该将type=“button”, 如果type="submit",该弹出div会自动隐藏     -->
<input type="button" value="不隐藏div,将aaa显示在div的输入框中" onclick="inputText()">
</td></tr>
<tr><td>
<input type="button" value="关闭" onclick="hideDiv()">
</td></tr>
</table>
</form>
  </div>
 </body>
</html>