二级菜单事件

最新推荐文章于 2022-07-13 19:46:59 发布

iteye_21028

最新推荐文章于 2022-07-13 19:46:59 发布

阅读量203

点赞数

分类专栏： javascript 文章标签： JavaScript XHTML CSS HTML ViewUI

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>nav</title>  
<style type="text/css">  
<!--  
ul,li,dl,dd{margin:0;padding:0;}
li{list-style-type:none;}
dl{text-indent:2em;}
-->  
</style>
<script type="text/javascript">
	function hiddenAllUL(){
		var nav2Id = document.getElementById("nav2");
		var arryUL = nav2Id.getElementsByTagName("ul");
		for(i=0;i<arryUL.length;i++){
			arryUL[i].style.display = "none";
		}
	}
	function liClickEvent(emid){
		hiddenAllUL();
		var obj = document.getElementById(emid); 
		obj.style.display = "block";
	}
	window.onload = function(){
		liClickEvent("first");
	}
</script> 
</head>    
<body>  
<ul id="nav">
<li οnclick="liClickEvent('first');">aaa</li>
<li οnclick="liClickEvent('second');">bbb</li>
<li οnclick="liClickEvent('third');">ccc</li>
</ul>
<dl id="nav2">
	<dd>
		<ul id="first">
			<li>111</li>
		</ul>	
	</dd>
	<dd>
		<ul id="second">
			<li>222</li>
		</ul>	
	</dd>
	<dd>
		<ul id="third">
			<li>333</li>
		</ul>	
	</dd>
</dl>
</body>
</html>

思路：1.先把所有的二级菜单隐藏起来.

2.把一级菜单和二级菜单通过id对应起来.

3.一级菜单onclick事件触发对应的二级菜单显示出来.

4.加载后默认的第一个一级菜单对应的二级菜单显示出来.