Java中隐藏显示效果
1、使用display,此方法隐藏后不再占用位置
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript"> function show() { var a = document.getElementById("add") if(a.style.display=="none") { a.style.display=""; } else { a.style.display="none"; } } </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<input type="button" value="显示/隐藏" width="30" onclick="show()"/> <form id="add" style="display:none;"> <ul> <li>请输入地区:<input id="name" type="text" name="name" width=30 ></li> <li>请输入邮编:<input id="postcode" type="text" name="postcode" width=30 maxlength="6"></li> <li><input type="submit" value="提交"/><input type="reset" value="取消"/></li> </ul> </form>
2、使用visibility,使用此方法隐藏后仍然占据位置
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript"> function show1() { var a = document.getElementById("add1") if(a.style.visibility=="hidden") { a.style.visibility=""; } else { a.style.visibility="hidden"; } } </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<input type="button" value="显示/隐藏" width="30"
onclick="show1()"/>
<form id="add1" style="visibility:hidden">
<ul>
<li>请输入地区:<input id="name" type="text" name="name" width=30 ></li>
<li>请输入邮编:<input id="postcode" type="text" name="postcode" width=30 maxlength="6"></li>
<li><input type="submit" value="提交"/><input type="reset" value="取消"/></li>
</ul>
</form>
3、使用jquery,将jquery-1.11.3.js包放在WebContent/js/文件夹下
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript" src="js/jquery-1.11.3.js"> function show2() { $("#add2").toggle(); } $(document).ready(function(){$("#add2").hide();}); </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<input type="button" value="显示/隐藏" width="30" onclick="show2()"/> <form id="add2" type="hidden"> <ul> <li>请输入地区:<input id="name" type="text" name="name" width=30 ></li> <li>请输入邮编:<input id="postcode" type="text" name="postcode" width=30 maxlength="6"></li> <li><input type="submit" value="提交"/><input type="reset" value="取消"/></li> </ul> </form>