EMLOG学院

JS(属性操作)隐藏与显示(display)

摘要:<html> <h...
<html> 
<head> 
<title>test</title> 
<meta http-equiv=content-type content="text/html; charset=gb2312"> 
<style> 
.titlediv{background-color: #505050;color:white;font-weight:bold;padding:10px;cursor:pointer } 
.contentdiv{border:3px solid #505050;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> 

评论(1)

收下了,得研究一下,才能用。