<html>
<head>
<title>JS style.display和style.visibility区别——测试例子_www.jb200.com</title>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<style>
.titlediv{background-color:#eee;color:white;font-weight:bold;padding:10px;cursor:pointer }
.contentdiv{border:3px solid blue;height:100px;padding:10px; }
</style>
<script type="text/
javascript">
function toggle(divid){
var odiv = document.getElementById(divid);
odiv.style.display=(odiv.style.display=="none")?"block":"none";
}
function showhide(divid){
var odiv = document.getElementById(divid);
odiv.style.visibility=(odiv.style.visibility=="visible")?"hidden":"visible";
}
</script>
</head>
<body >
<div class="titlediv" onclick="toggle('divContetn1')">click here</div>
<div class="contentdiv" id="divContetn1">this is some content to show and hide
</div>
<p> </p>
<div class="titlediv" onclick="toggle('divContetn2')">click here</div>
<div class="contentdiv" id="divContetn2">this is some content to show and hide
</div>
<p> </p>
<div class="titlediv" onclick="showhide('divContetn3')">click here</div>
<div class="contentdiv" id="divContetn3">this is some content to show and hide
</div>
<p> </p>
<div class="titlediv" onclick="showhide('divContetn4')">click here</div>
<div class="contentdiv" id="divContetn4">this is some content to show and hide
</div>
</body>
</html>
