首页 > 代码库 > js隐藏
js隐藏
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>js</title>
<style>
.reveal *{ /*reveal的所有子元素都隐藏起来*/
display:none;
}
.reveal *.handle{
display:block; /* 将reveal的handle元素显示出来*/
}
</style>
<script>
window.onload = function(){
// 找到所有class等于reveal的元素，本例中只有一个即div class=“reveal”.
var elements = document.getElementsByClassName("reveal");
for(var i=0;i<elements.length;i++){ /* elements.length==1*/
var elt = elements[i]; /* 当前的div元素*/
var title = elt.getElementsByClassName("handle")[0]; /*得到h1*/
addRevealHandler(title,elt);
}
function addRevealHandler(title,elt){
title.onclick = function(){
if(elt.className=="reveal")
// 第一次点击则显示。因为只有reveal的所有元素才隐藏，revealed的元素不处理
elt.className="revealed";
else if(elt.className=="revealed")
// 第二次点击将显示的元素再次隐藏
elt.className="reveal";
}
}
}
</script>
</head>
<body>
<div class="reveal">
<h1 class="handle">Click here to Reveal Hidden Text</h1>
<p class="hidden">This paragraph is hidden.It appears when you click on the title.</p>
</div>
</body>
</html>
js隐藏