|
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>hover显示/隐藏切换 - 纯JS简化版</title>
<style type="text/css">
*{margin: 0; padding: 0;}
.hoverbox {margin:10px; width: 500px;}
.hovertit {background:
#666; padding: 10px;color: #fff;}
.hoverdiv { display: none; border: 1px solid
#666; padding: 10px;}
</style>
<script type="text/javascript">
window.onload = function() {
function
getClass(elem, elements) {
var
tags = elem.getElementsByTagName(‘*‘);
var
arr = [];
for(var
i=0; i<tags.length; i++) {
if(tags[i].className == elements) {
arr.push(tags[i]);
}
}
return
arr;
}
var
hoverbox = getClass(document, ‘hoverbox‘);
for(var
b=0; b<hoverbox.length; b++) {
getClass(hoverbox[b], ‘hovertit‘)[0].index = b;
getClass(hoverbox[b], ‘hovertit‘)[0].onclick = function() {
if(getClass(hoverbox[this.index], ‘hoverdiv‘)[0].style.display == ‘block‘) {
getClass(hoverbox[this.index], ‘hoverdiv‘)[0].style.display = ‘none‘;
} else
{
getClass(hoverbox[this.index], ‘hoverdiv‘)[0].style.display = ‘block‘
}
//getClass(hoverbox[this.index], ‘hoverdiv‘)[0].style.display = getClass(hoverbox[this.index], ‘hoverdiv‘)[0].style.display == ‘block‘ ? ‘none‘ : ‘block‘;
}
}
}
</script>
</head>
<body>
<div class="hoverbox">
<div class="hovertit">小标题一</div>
<div class="hoverdiv">小标题内容一</div>
</div>
<div class="hoverbox">
<div class="hovertit">小标题二</div>
<div class="hoverdiv">小标题内容二</div>
</div>
</body>
</html>
| 
