4.2DOM操作练习题

竖向下拉列表（不可选）

     <style type="text/css">
                .yiji{
				width:100px;
				height:50px;
				border:1px solid #666;
				text-align:center;
				vertical-align:middle;
				line-height:50px;
				
			}
		.xiang{
				width:100px;
				height:50px;
				border:1px solid #666;
				text-align:center;
				vertical-align:middle;
				line-height:50px;
				background-color:#0F0;
			}
       </style>
      <body>
                 <div class="yiji" onclick="tan(\'erji1\')">首页</div>
    	                 <div id="erji1" style=" display:none">
                         <div class="xiang">二级栏目</div>
                         <div class="xiang">二级栏目</div>
                         <div class="xiang">二级栏目</div>
               </div>
    
                <div class="yiji"  onclick="tan(\'erji2\')">首页 </div>
    	                <div id="erji2" style=" display:none" >
                        <div class="xiang">二级栏目</div>
                        <div class="xiang">二级栏目</div>
                        <div class="xiang">二级栏目</div>
                </div>
     </body>
     <script type="text/javascript">
                         function tan(a)
		{
			var tan1 = document.getElementById(a)
			if(tan1.style.display=="none")
			{
				tan1.style.display = "block"
			}
			else
			{
				tan1.style.display = "none"
			}
		}
    </script>

下拉列表（可选）

        <style type="text/css">
    	.yiji{
				width:100px;
				height:50px;
				border:1px solid #666;
				text-align:center;
				vertical-align:middle;
				line-height:50px;
				
			}
		.xiang{
				width:100px;
				height:50px;
				border:1px solid #666;
				text-align:center;
				vertical-align:middle;
				line-height:50px;
				background-color:#0F0;
			}
           </style>
           <body>
	       <div class="yiji" onclick="tan(\'erji1\')">首页</div>
    	       <div id="erji1" style=" display:none">
                     <div class="xiang">二级栏目</div>
                     <div class="xiang">二级栏目</div>
                     <div class="xiang">二级栏目</div>
              </div>
    
              <div class="yiji"  onclick="tan(\'erji2\')">首页 </div>
    	      <div id="erji2" style=" display:none" >
                    <div class="xiang">二级栏目</div>
                    <div class="xiang">二级栏目</div>
                    <div class="xiang">二级栏目</div>
             </div>
   
          </body>
          <script type="text/javascript">
    	function tan(a)
		{
			var tan1 = document.getElementById(a)
			if(tan1.style.display=="none")
			{
				tan1.style.display = "block"
			}
			else
			{
				tan1.style.display = "none"
			}
		}
            </script>

鼠标移上下拉列表

<style type="text/css">
	*{
		margin:0px auto
		}
	.aa{
		 width:100px;
		 height:50px;
		 border:1px solid #666;
		 vertical-align:middle;
		 text-align:center;
		 line-height:50px;
		 float:left;
		}
	.bb{
		 width:100px;
		 height:50px;
		 background-color:#0F0;
		 vertical-align:middle;
		 text-align:center;
		 line-height:50px;
		 float:left;
		
		}
</style>


<body>
	<div style="width:310px; height:50px; border:1px solid #666;">
    	<div class="aa" onmousemove="shang(\'erji1\')" onmouseout="yi(\'erji1\')">首页
        	<div id="erji1" style="display:none">
            	<div class="bb">耳机</div>
                <div class="bb">耳机</div>
                <div class="bb">耳机</div>
            </div>
        </div>
        <div class="aa" onmousemove="shang(\'erji2\')" onmouseout="yi(\'erji2\')">首页
        	<div id="erji2" style="display:none">
            	<div class="bb">耳机</div>
                <div class="bb">耳机</div>
                <div class="bb">耳机</div>
            </div></div>
        <div class="aa" onmousemove="shang(\'erji3\')" onmouseout="yi(\'erji3\')">首页
        	<div id="erji3" style="display:none">
            	<div class="bb">耳机</div>
                <div class="bb">耳机</div>
                <div class="bb">耳机</div>
            </div></div>
    </div>
</body>

<script type="text/javascript">
	function shang(a)
	{
		var erji = document.getElementById(a)
		erji.style.display = "block"
	}
	function yi(a)
	{
		var erji = document.getElementById(a)
		erji.style.display = "none"
	}
</script>