Javascript 实例-- 滑动菜单

最新推荐文章于 2024-07-30 17:09:59 发布

iteye_19838

最新推荐文章于 2024-07-30 17:09:59 发布

阅读量87

点赞数

分类专栏： Javascript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_19838/article/details/82568385

版权

Javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏


<html>
<head>
<style>
	#menu h2{
		width:80px;
		line-height:25px;
		margin:0px;
		padding:0px;
		border-right:2px solid white;
		float:left;
		background:#999;
		text-align:center;
		color:white;
	}

	#menu .selected{
		background:#666;
	}

	#content div{
		width:244px;
		height:120px;
		float:clear;
		background:#666;
		display:none;
		color:white;
	}
	#content .selected{
		display:block;
	}
</style>

</head>
<body>
<div id="menu">
	<h2 class="selected" onmouseover="select(0)">one</h2>
	<h2 onmouseover="select(1)">two</h2>
	<h2 onmouseover="select(2)">three</h2>
</div>

<div id="content">
	<div class="selected">
		<br>aaaaaaaaaaaaa 
		<br>aaaaaaaaaaaaa 
		<br>aaaaaaaaaaaaa 
	</div>
	<div>
		<br>bbbbbbbbbbbbb
		<br>bbbbbbbbbbbbb
		<br>bbbbbbbbbbbbb
	</div>
	<div>
		<br>ccccccccccccc
		<br>ccccccccccccc
		<br>ccccccccccccc
	</div>
</div>

<script>
	function select(num){
		var menus = document.getElementsByTagName('h2');
		var contents = document.getElementById('content').getElementsByTagName('div');
		for(var i=0; i<menus.length; i++){
			if(num==i){
				menus[i].className='selected';
				contents[i].style.display="block"
			}else{
				menus[i].className='';
				contents[i].style.display="none"
			}
		}
	}
</script>
</body>
</html>

iteye_19838

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript 实例-- 滑动菜单

[code="html"] #menu h2{ width:80px; line-height:25px; margin:0px; padding:0px; border-right:2px solid white; float:left; background:#999; text-align:center; color:wh...
复制链接

扫一扫

专栏目录