应用JavaScript脚本制作二级导航菜单

来源：互联网发布：python 变量类型编辑：程序博客网时间：2024/05/17 08:44
JS脚本不仅可以验证表单元素，而且可以制作各式各样的网站导航菜单。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>应用JavaScript脚本制作二级导航菜单</title><style type="text/css">body,td,th {    font-size: 12px;}body {    margin-left: 0px;    margin-top: 0px;    margin-right: 0px;    margin-bottom: 0px;}a {    font-size: 12px;}a:link {    text-decoration: none;}a:visited {    text-decoration: none;}a:hover {    text-decoration: none;}a:active {    text-decoration: none;}</style> <script language="javascript">            function Lmenu(value){                switch (value){                    case "新品":                        submenu.innerHTML=" <a href='#'>商品展示</a> | <a href='#'>销售排行榜</a> | <a href='#'>商品查询</a> ";                        break;                              case "购物":                        submenu.innerHTML=" <a href='#'>添加商品</a> | <a href='#'>移出指定商品</a> |<a href='#'>清空购物车</a> | <a href='#'>查询购物车</a> | <a href='#'>填写订单信息</a> ";                        break;                                      case "会员":                        submenu.innerHTML=" <a href='#'>注册会员</a> | <a href='#'>修改会员</a> | <a href='#'>账户查询</a> ";                        break;                                          }            }         </script></head><body><table width="761" height="218" border="1" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF" background="./10/images/bg.jpg" bgcolor="#3F8701">  <tr>    <td valign="top">    //以上是确定图片在第一个单元格显示        <table width="761" border="0" cellspacing="0" cellpadding="0">        //用表格分成三行      <tr>        <td height="48" colspan="2">&nbsp;</td>      </tr>      <!--定义一级菜单区域-->      <tr>        <td height="27" colspan="2" align="right">            <table width="761" height="20" border="0" cellpadding="0" cellspacing="0">          <tr>            <td width="396">&nbsp;</td>            <td width="67" align="center"><a href="index.php">首&nbsp;页</a></td>            <td width="75" align="center"><a href="#" onMouseMove="Lmenu('新品')">新品上架</a></td>            <td width="75" align="center"><a href="#" onMouseMove="Lmenu('购物')">购物车</a></td>            <td width="74" align="center"><a href="#" onMouseMove="Lmenu('会员')">会员中心</a></td>            <td width="61" align="center"><a href="index.php">在线帮助</a></td>            <td width="13">&nbsp;</td>          </tr>        </table>          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>      </tr>      <!--定义二级菜单区域-->      <tr>        <td width="226" height="20" align="right">&nbsp;</td>        <td width="535" align="right"> <div id="submenu">&nbsp;</div></td>          </tr>    </table>    </td>  </tr></table></body></html>
这里写图片描述
阅读全文
0 0