利用JS做到隐藏div和显示div

div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白

style=”visibility: none;”

document.getElementById(“typediv1″).style.visibility=”hidden”;//隐藏

document.getElementById(“typediv1″).style.visibility=”visible”;//显示
通过设置display属性可以使div隐藏后释放占用的页面空间,如下

style=”display: none;”

document.getElementById(“typediv1″).style.display=”none”;//隐藏

document.getElementById(“typediv1″).style.display=”";//显示

此JS代码中,没有用try——Catch捕获错误,代码如下:

<script language=”javascript”>
//创建一个showhidediv的方法,直接跟ID属性
function showhidediv(id){
var sbtitle=document.getElementById(id);
if(sbtitle){
if(sbtitle.style.display==’block’){
sbtitle.style.display=’none’;
}else{
sbtitle.style.display=’block’;
}
}
}
</script>
<div id=”show” onMouseMove=’showhidediv(“msg”)’;>鼠标移动这里</div><!–这里是点击div,ID要下面的ID–>
<div id=”msg” style=”display:none;”>出现显示的内容</div> <!–这里是MsgDiv–>

onMouseMove=’showhidediv(“msg”)’; 这里是鼠标动作,可以替换成Click或其他!

再次升级,做两个层之间的切换:

<script language=”javascript”>
//创建一个showhidediv的方法,直接跟ID属性
function showhidediv(id){
var age=document.getElementById(“msg_2″);
var name=document.getElementById(“msg_1″);
if (id == ‘name’) {
if (name.style.display==’none’) {
age.style.display=’none’;
name.style.display=’block’;
}
} else {
if (age.style.display==’none’) {
name.style.display=’none’;
age.style.display=’block’;
}
}
}
</script>
<div id=”show” style=”float:left;” onMouseMove=’showhidediv(“name”)’;>Name:</div><div id=”show” style=”float:left;” onMouseMove=’showhidediv(“age”)’;>Age:</div>
<div id=”msg_1″ style=”display:none;float:left;”>林雨林</div>
<div id=”msg_2″ style=”display:none;float:left;”>18</div>

 

//示例二

显示一个层的同时隐藏另一个层

 

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />

<title>无标题文档</title>

<script language=”JavaScript” type=”text/JavaScript”>

<!–

function showhidediv(id){

var age=document.getElementById(“msg_2″);

var name=document.getElementById(“msg_1″);

if (id == ‘name’) {

   if (name.style.display==’none’) {

    age.style.display=’none’;

    name.style.display=’block’;

   }

} else {

   if (age.style.display==’none’) {

    name.style.display=’none’;

    age.style.display=’block’;

   }

}   

}

–>

</script>

</script>

</head>

<body>

<div id=”msg_1″ style=”display:block;float:left;” onclick=’showhidediv(“age”)’;>

<p id=”photoTitle” >单击此处添加描述</p></div>

<div id=”msg_2″ style=”display:none;float:left;” >

<form id=”">

<textarea id=”" name=”"></textarea>

<div class=”">

<input type=”button” value=”保存” class=”" id=”">

<input type=”button” value=”取消” class=”" id=”" onclick=’showhidediv(“name”)’;>

</div>

<input type=”hidden” name=”" value=”"></form>

</div>

</body>

</html>





本文来源于网络,仅代表作者观点,如果您是原作者,可联系我们删除本文

利用JS做到隐藏div和显示div:等您坐沙发呢!

发表评论

Spam Protection by WP-SpamFree

快捷键:Ctrl+Enter