php 按下按钮时显示隐藏的 div 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18739585/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
show hidden div content when button is pressed
提问by maro
Hi guys? how can i hide div content until a button is pressed?. Can anyone help me please.I want this div not to show up until the "add new teacher" button in the table is pressed. This is the div content which i want it to be hidden until the button is pressed
嗨，大家好？如何在按下按钮之前隐藏 div 内容？任何人都可以帮助我。我希望这个 div 在按下表中的“添加新老师”按钮之前不显示。这是我希望在按下按钮之前将其隐藏的 div 内容
<div id="myform">
<p align="center">
<strong>
Add information for new teacher here
</strong></p>
<form action="<?php echo $editFormAction; ?>" method="post" name="form1" id="form1">
<table align="center" id="forms">
<tr valign="baseline">
<td nowrap="nowrap" align="right">First name:</td>
<td><input type="text" name="first_name" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Last name:</td>
<td><input type="text" name="last_name" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Subjects:</td>
<td><input type="text" name="subjects" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Phonenumber:</td>
<td><input type="text" name="phonenumber" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Email:</td>
<td><input type="text" name="email" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Username:</td>
<td><input type="text" name="username" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Password:</td>
<td><input type="text" name="password" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right"> </td>
<td><input type="submit" value="Insert record" id="hideit"/></td>
</tr>
</table>
<input type="hidden" name="MM_insert" value="form1" />
</form>
<p> </p>
</div>
And this is my table which contain "Add New Teacher" button
这是我的表格，其中包含“添加新教师”按钮
<p align="center">
<strong>
List of teachers in Minaki Sec school
</strong></p>
<table border="1" align="center" class="altrowstable" id="alternatecolor">
<tr id="row">
<th>teacher id</th>
<th>first name</th>
<th>last name</th>
<th>subjects</th>
<th>Phonenumber</th>
<th>Email</th>
<th>username</th>
<th>password</th>
<th>Edit</th>
<th>Delete</th>
<th>Details</th>
</tr>
<?php do { ?>
<tr>
<td><?php echo $row_teacherrec['teacher_id']; ?></td>
<td><?php echo $row_teacherrec['first_name']; ?></td>
<td><?php echo $row_teacherrec['last_name']; ?></td>
<td><?php echo $row_teacherrec['subjects']; ?></td>
<td><?php echo $row_teacherrec['phonenumber']; ?></td>
<td><?php echo $row_teacherrec['email']; ?></td>
<td><?php echo $row_teacherrec['username']; ?></td>
<td><?php echo $row_teacherrec['password']; ?></td>
<td><button onclick="location.href= 'edit_teacher.php? teacher_id=<?php echo $row_teacherrec['teacher_id']; ?>'">Edit</button></td>
<td><button onclick="location.href= 'delete_teacher.php? teacher_id=<?php echo $row_teacherrec['teacher_id']; ?>'">Delete</button></td>
<td><button onclick="location.href= 'edit_teacher.php? teacher_id=<?php echo $row_teacherrec['teacher_id']; ?>'">Details</button></td>
</tr>
<?php } while ($row_teacherrec = mysql_fetch_assoc($teacherrec)); ?>
<tr>
<td colspan="8"></td>
<td colspan="6" align="center"><button id="showit" onclick="location.href='teacher.php'">+Add new Teacher</button></td>
</tr>
</table>
回答by Rohan Kumar
Try it like,
试试看，
$(function(){
$('button#showit').on('click',function(){
$('#myform').show();
});
});
Initiallythe divshould be hiddenlike
最初的div应该是hidden像
<div id="myform" style="display:none">
.....
回答by devo
Add display:nonestyle to your div, then call $("#div-id").show();on button click.
将display:none样式添加到您的 div，然后调用$("#div-id").show();按钮单击。
<div id="myform" style="display:none">
// contents here
</div>
回答by Marty
on your new teacher form add an inline style to hide the form
在您的新教师表单上添加内联样式以隐藏表单
<div id="myform" style="display:none">
or within your jQuery simply add
或在您的 jQuery 中简单地添加
$(document).ready(function(){
// hide form on page load
$('#myform').hide();
// when button is pressed
$('button').on('click',function(){
$('#myform').show();
});
});
回答by Code L?ver
Make the following changes in you code:
在您的代码中进行以下更改：
<div id="myform" style="display:none;">
Add the style in your div which you want to hide.
在 div 中添加要隐藏的样式。
And Modify your button code as:
并将您的按钮代码修改为：
<button id="showit">+Add new Teacher</button>
And add this jQuery:
并添加这个 jQuery：
$(document).ready(function(){
$("#showit").click(function(){
$("#myform").css("display","block");
});
});
回答by Madhan
$(function(){
$('.button_name').click(function(){
$('#myform').show();
});
});
<button class="button_name">
<div id="myform" style="display:none">
or using java script
或使用java脚本
function new_disp(){
document.getElementById('myform').style.display='block';
}
<button onclick='new_disp();'>
<div id="myform" style="display:none">
