下拉菜单案例

最新推荐文章于 2024-07-11 16:50:01 发布

xiongdongyang2012

最新推荐文章于 2024-07-11 16:50:01 发布

阅读量249

点赞数

分类专栏： web 文章标签： function javascript menu div

本文链接：https://blog.csdn.net/xiongdongyang2012/article/details/6783725

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<style>
			#d1{
				width:250px;
				height:400px;
				background-color:#cccccc;
				margin-left:40px;
				margin-top:40px;
			}
			#d2{
				height:30px;
				background-color:blue;
				color:white;
			}
		</style>
		<script>
			function doAction(index){
				var obj = document.getElementById('u'+index);
				if(obj.style.display == 'none'){
					obj.style.display = 'block';
				}else{
					obj.style.display = 'none';
				}
			}
			
			function test(){
				alert(document.getElementById('l1').innerHTML);
			}
			
			function change(){
				var obj = document.getElementById('img1');
				obj.src = 't1.jpg';
			}
		</script>
	</head>
	<body style="font-size:24px;">
		<div id="d1">
			<div id="d2">菜单</div>
			<div id="d3">
				<ul>
					<li><span οnclick="doAction(1);">menu1</span></li>
					<ul id="u1" style="display:none;">
						<li><a href="#">item1</a></li>
						<li><a href="#">item1</a></li>
					</ul>
					<li><span οnclick="doAction(2);">menu2</span></li>
					<ul id="u2" style="display:none;">
						<li><a href="#">item1</a></li>
						<li><a href="#">item1</a></li>
					</ul>
				</ul>
			</div>
		</div>
		<img src="t2.jpg" id="img1"/><a href="javascript:;"
			 οnclick="change();">换一个</a>
	</body>
</html>