WEB前端：03_hover切换(显示/隐藏)

最新推荐文章于 2024-04-03 04:43:28 发布

weixin_30917213

最新推荐文章于 2024-04-03 04:43:28 发布

阅读量144

点赞数

原文链接：http://www.cnblogs.com/haicheng/p/3703720.html

版权

hover切换(显示/隐藏)

网站常用效果之一，以下为简化版，用于学习javascript基础知识。

效果图：

hover显示/隐藏切换 - 纯JS简化版

<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() {
	
	var hovertit = document.getElementById('hovertit');
	var hoverdiv = document.getElementById('hoverdiv');

	hovertit.onclick = function() {
		//hoverdiv.style.display = hoverdiv.style.display == 'block' ? 'none' : 'block';
		if(hoverdiv.style.display == 'block') {
			hoverdiv.style.display = 'none';
		} else {
			hoverdiv.style.display = 'block';
		}
	}
}
</script>
</head>
<body>

<div class="hoverbox">
	<div id="hovertit">小标题一</div>
	<div id="hoverdiv">小标题内容一</div>
</div>

</body>
</html>

hover显示/隐藏切换[版本二]

<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>

转载于:https://www.cnblogs.com/haicheng/p/3703720.html

weixin_30917213

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB前端：03_hover切换(显示/隐藏)

hover切换(显示/隐藏)网站常用效果之一，以下为简化版，用于学习javascript基础知识。效果图：hover显示/隐藏切换 - 纯JS简化版<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">&l...
复制链接

扫一扫