Java中隐藏显示效果

1、使用display，此方法隐藏后不再占用位置

<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>

<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，使用此方法隐藏后仍然占据位置

<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>

<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/文件夹下

<script type="text/javascript" src="js/jquery-1.11.3.js">

    function show2()
    {
        $("#add2").toggle();
    }
    
    $(document).ready(function(){$("#add2").hide();});

</script>

<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>