一、javascript实现

方法一：

document.getElementById("idname").style.visibility="hidden";
document.getElementById("idname").style.visibility="visible";

注：该方法隐藏元素之后，仍占用空间，显示出空白区域

方法二：

document.getElementById("idname").style.display="none";
document.getElementById("idname").style.display="inline";

注：该方法隐藏元素之后，不占用空间

jquery：

$("selector").hide();
$("selector").show();

注：隐藏后不占用位置
属性中设置，可实现元素隐藏。

style="display: none;"

二、使用jQuery实现

jQuery有6个相关方法可以用于实现该功能，可以分为两类：

1、直接显示或隐藏

$( "#div1").show(); 若原状态为隐藏，则将其显示

$( "#div1").hide(); 若原状态为显示，则将其隐藏

$( "#div1").toggle(); 该方法是上面两个方法的综合，隐藏变显示，显示变隐藏。

2、拉动式显示或隐藏

$( "#div1").slideUp(); 若原状态为显示，则将其从下向上收回

$( "#div1").slideDown(); 若原状态为隐藏，则将其从上向下显示

$( "#div1").slideToggle(); 该方法是上面两个方法的综合