菜单列表：
代码演示：
<html> <head> <title>DHTML技术演示---菜单列表1</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> /*老版本的IE支持，新版本不支持了 dl{ height:18px; overflow:hidden; }*/ /* block : CSS1 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行 none : CSS1 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间 ul{ //display:none;//不显示 display:block;//块显示 } */ table { border:#ff80ff; width:80px; } table ul{ list-style:none; margin:0px;/*外补丁*/ padding:0px;/*内补丁*/ background-color:#ff8000; display:none; } table td{ border:#0000ff 1px solid; background:#80ff00; } table td a:link, table td a:visited{ color:#8080c0; text-decoration:none; } table td a:hover{ color:#0000ff;; } .open{ display:block; } .close{ display:none; } </style> <script type="text/javascript"> function list(node){ var oTdNode = node.parentNode; //alert( oTdNode.nodeName);//TD var oUlNode = oTdNode.getElementsByTagName("ul")[0]; //alert( oUlNode.nodeName);//UL if( oUlNode.className =="open"){ oUlNode.className ="close"; }else{ oUlNode.className ="open"; } } </script> </head> <!--DHTML技术使用的基本思路： 1. 用标签封装数据---html范畴 2. 定义样式---css范畴 3. 明确事件源、事件和要处理的节点---dom范畴 4. 明确具体的操作方式，其实就是事件的处理内容(过程)---js范畴 --> <body> <table> <tr> <td> <a href="javascript:void(0)" onclick="list(this)">文件菜单</a> <ul> <li>菜单项一</li> <li>菜单项二</li> <li>菜单项三</li> <li>菜单项四</li> </ul> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list(this)">编辑菜单</a> <ul> <li>菜单项一</li> <li>菜单项二</li> <li>菜单项三</li> <li>菜单项四</li> </ul> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list(this)">调试菜单</a> <ul> <li>菜单项一</li> <li>菜单项二</li> <li>菜单项三</li> <li>菜单项四</li> </ul> </td> </tr> </table> </body> </html>
360 8.1 演示结果;
下面就是只能点开一个菜单（点一个菜单时，把其他菜单全部关闭）：
<html> <head> <title>DHTML技术演示---菜单列表2</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> /*老版本的IE支持，新版本不支持了 dl{ height:18px; overflow:hidden; }*/ /* ul{ //display:none;//不显示 display:block;//块显示 } */ table { border: #ff80ff; width: 80px; } table ul { list-style: none; margin: 0px; padding: 0px; background-color: #ff8000; display: none; } table td { border: #0000ff 1px solid; background: #80ff00; } table td a:link, table td a:visited { color: #8080c0; text-decoration: none; } table td a:hover { color: #0000ff;; } .open { display: block; } .close { display: none; } </style> <script type="text/javascript"> function list(node){ var oTdNode = node.parentNode; //alert( oTdNode.nodeName);//TD var oUlNode = oTdNode.getElementsByTagName("ul")[0]; //alert( oUlNode.nodeName);//UL var oNode = document.getElementsByName("men"); for (x = 0; x < oNode.length; x++) { var ulNode = oNode[x].parentNode.getElementsByTagName("ul")[0]; if (oNode[x].innerText == node.innerText) { if (ulNode.className == "open") { ulNode.className = "close"; } else { ulNode.className = "open"; } } else if (ulNode.className == "open") { ulNode.className = "close"; } } } </script> </head> <!--DHTML技术使用的基本思路： 1. 用标签封装数据---html范畴 2. 定义样式---css范畴 3. 明确事件源、事件和要处理的节点---dom范畴 4. 明确具体的操作方式，其实就是事件的处理内容(过程)---js范畴 --> <body> <table> <tr> <td> <a href="javascript:void(0)" onclick="list(this)" name="men">文件菜单</a> <ul> <li> 菜单项一 </li> <li> 菜单项二 </li> <li> 菜单项三 </li> <li> 菜单项四 </li> </ul> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list(this)" name="men">编辑菜单</a> <ul> <li> 菜单项一 </li> <li> 菜单项二 </li> <li> 菜单项三 </li> <li> 菜单项四 </li> </ul> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list(this)" name="men">调试菜单</a> <ul> <li> 菜单项一 </li> <li> 菜单项二 </li> <li> 菜单项三 </li> <li> 菜单项四 </li> </ul> </td> </tr> </table> </body> </html>
演示结果：
