javaScript 案例之简单菜单的实现

最新推荐文章于 2021-06-23 15:34:14 发布

黑暗浪子

最新推荐文章于 2021-06-23 15:34:14 发布

阅读量543

点赞数

分类专栏： javaScript+html5+CSS学习文章标签： javaScript DOM案例

本文链接：https://blog.csdn.net/u012453619/article/details/37941647

版权

javaScript+html5+CSS学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Html study</title>
	<script type="text/javascript">
		function forMouseMove(node){
			var mydiv = document.getElementById('mydiv');
			var submenu = mydiv.getElementsByTagName('div');
			for(var i=0; i<submenu.length; i++){
				submenu.item(i).style.display = 'none';	//隐藏所有二级菜单
			}
			node.style.backgroundColor='#999';
			if(node.id == 'menu1'){
				document.getElementById('div1').style.display = 'block';
			}else if(node.id == 'menu2'){
				document.getElementById('div2').style.display = 'block';
			}else if(node.id == 'menu3'){
				document.getElementById('div3').style.display = 'block';
			}
		}
		function forMouseOut(node){
			node.style.backgroundColor='#FFF';
			var mydiv = document.getElementById('mydiv');
			var submenu = mydiv.getElementsByTagName('div');
			for(var i=0; i<submenu.length; i++){
				submenu.item(i).style.display = 'none';	//隐藏所有二级菜单
			}
		}
    </script>
</head>
<body>
	<div>
    	<table border="0">
        <tr id="mytr">
    	<td style="background-color:#FFF" id="1">
        <a onMouseMove="forMouseMove(this)" onMouseOut="forMouseOut(this)" href="#" id="menu1">水果</a>
        </td>
        
        <td style="background-color:#FFF">
        <a onMouseMove="forMouseMove(this)" onMouseOut="forMouseOut(this)" href="#" id="menu2">主食</a>
        </td>
        
        <td style="background-color:#FFF">
        <a onMouseMove="forMouseMove(this)" onMouseOut="forMouseOut(this)" href="#" id="menu3">饮料</a>
        </td>
        </tr>
        </table>
    </div>
    <div id="mydiv" style="padding-top:10px; width:200px;">
    <div id="div1" style="display:none;background-color:#999">
    	<a href="#">苹果</a>  <a href="#">香蕉</a><br/>
        <a href="#">梨子</a>  <a href="#">橘子</a>
    </div>
    <div  id="div2" style="display:none;background-color:#999">
    	<a href="#">米饭</a>  <a href="#">稀饭</a><br/>
        <a href="#">包子</a>  <a href="#">面条</a>
    </div>
    <div id="div3" style="display:none;background-color:#999">
    	<a href="#">雪碧</a>  <a href="#">橙汁</a><br/>
        <a href="#">可乐</a>  <a href="#">芬达</a>
    </div>
    </div>
</body>
</html>