三级菜单测试 - kevin_20131022

三级菜单测试
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!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></title>
<style type="text/css">  
body {margin:0px;background-color: #dfe8f6;}
#Left_Nav {position:relative;z-index:1; width:190px; height:auto;}
#Left_Area {width:178px;z-index:1;background-color:#FFFFFF; border-width:0px 1px 1px 1px; border-style:solid; border-color:#99bbe8; height:200px;}
.leftTree_daohang_selcet {background:url(images/left_daohang_bg_slecet.jpg);border-width:1px 0px;border-style:solid;border-color:#99bbe8;height:24px; line-height:24px;font-size:13px; font-weight:bold; color:#15428b; text-decoration:none;}
.leftTree_first_font,.leftTree_first_font a,.leftTree_first_font a:visited{font-size:13px; font-weight: normal; color:#15428b; text-decoration:none;}
.leftTree_first_font a:hover{font-weight: bold;}
.leftTree_sec_font,.leftTree_sec_font a,.leftTree_sec_font a:visited{line-height:24px; font-size:13px; font-weight: normal; color:#000; text-decoration:none;}
.leftTree_sec_font a:hover {font-weight: bold;}
</style>  
<script type="text/javascript"> 
/* 
 功能描述：js实现，点击一个选项显示其下属项列表，再次点击收起；其他项列表无变化 
 提示：本例状态用“+”“-”号表示，可以替换成对应的图片只要将对应的符号替换即可 
*/
function showList(div_id)  
{ 
 var obj = document.getElementById(div_id + "_ljf"); 
 var click_obj = document.getElementById(div_id); 
 var text = click_obj.innerHTML; 
 var imgleft=document.getElementById("left");
   
 if(obj.style.display == "none")  
 {  
  obj.style.display = "block"; 
//  click_obj.innerHTML = text.replace("+","-"); 
  imgleft.src="images/left_bottom_arrow.png";
 }  
 else 
 {  
  obj.style.display = "none"; 
//  click_obj.innerHTML = text.replace("-","+"); 
  imgleft.src="images/left_left_arrow.png";
 }  
} 
</script>  
</head>
 
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td style="padding:5px;">
<div id="Left_Nav"><div id="Left_Area">
   
<div id="pNode1" onclick="showList(this.id);" style="cursor:pointer;" class="leftTree_daohang_selcet">
<table border="0" cellspacing="0" cellpadding="0"><tr><td width="12"><img id="left" src="images/left_left_arrow.png" width="12" height="12" /></td><td>采购管理</td></tr></table>
</div>  
    <div id="pNode1_ljf" style="display:none; padding:5px 0px;">  
         <div id="pNode1_sub2" style="padding-left:20px; cursor:pointer; line-height:24px;" class="leftTree_first_font">
         <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="12"><img src="images/left_daohang_sec_select.gif" width="10" height="12" /></td>
            <td><a href="#">采购订货</a></td>
          </tr>
        </table>
        </div> 
        <div id="pNode1_sub3" style="padding-left:20px; cursor:pointer; line-height:24px;" class="leftTree_first_font">
         <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="12"><img src="images/left_daohang_sec_select.gif" width="10" height="12" /></td>
            <td><a href="#">采购入库</a></td>
          </tr>
        </table>
        </div> 
        <div id="pNode1_sub4" style="padding-left:20px; cursor:pointer; line-height:24px;" class="leftTree_first_font">
         <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="12"><img src="images/left_daohang_sec_select.gif" width="10" height="12" /></td>
            <td><a href="#">采购退货</a></td>
          </tr>
        </table>
        </div> 
        <div id="pNode1_sub5" style="padding-left:20px; cursor:pointer; line-height:24px;" class="leftTree_first_font">
         <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="12"><img src="images/left_daohang_sec_select.gif" width="10" height="12" /></td>
            <td><a href="#">采购录单</a></td>
          </tr>
        </table>
        </div> 
        <div id="pNode1_sub6" style="padding-left:20px; cursor:pointer; line-height:24px;" class="leftTree_first_font">
         <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="12"><img src="images/left_daohang_sec_select.gif" width="10" height="12" /></td>
            <td><a href="#">付款核销</a></td>
          </tr>
        </table>
        </div> 
         
        <div id="pNode1_sub7" onclick="showList(this.id);" style="padding-left:20px; cursor:pointer; line-height:24px;" class="leftTree_first_font">
         <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="12"><img id="left" src="images/left_left_arrow.png" width="12" height="12" /></td>
            <td><a href="#">采购单据列表</a></td>
          </tr>
        </table>
        </div> 
        <div id="pNode1_sub7_ljf" style="display:none;"> 
              <div id="pNode1_sub7_s1" style="padding-left:40px;" class="leftTree_sec_font">·<a href="#">采购订单</a></div> 
              <div id="pNode1_sub7_s2" style="padding-left:40px;" class="leftTree_sec_font">·<a href="#">采购入库单</a></div>             
              <div id="pNode1_sub7_s3" style="padding-left:40px;" class="leftTree_sec_font">·<a href="#">采购退货单</a></div>             
              <div id="pNode1_sub7_s4" style="padding-left:40px;" class="leftTree_sec_font">·<a href="#">付款单</a></div> 
         </div> 
          
        <div id="pNode1_sub8" onclick="showList(this.id);" style="padding-left:20px; cursor:pointer; line-height:24px;" class="leftTree_first_font">
         <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="12"><img id="left" src="images/left_left_arrow.png" width="12" height="12" /></td>
            <td><a href="#">采购业务查询</a></td>
          </tr>
        </table>
        </div> 
         <div id="pNode1_sub8_ljf" style="display:none;"> 
              <div id="pNode1_sub8_s1" style="padding-left:40px;" class="leftTree_sec_font">·<a href="#">采购结算表</a></div> 
              <div id="pNode1_sub8_s2" style="padding-left:40px;" class="leftTree_sec_font">·<a href="#">采购进货明细表</a></div>             
              <div id="pNode1_sub8_s3" style="padding-left:40px;" class="leftTree_sec_font">·<a href="#">采购退货明细表</a></div>             
              <div id="pNode1_sub8_s4" style="padding-left:40px;" class="leftTree_sec_font">·<a href="#">进货统计表</a></div> 
              <div id="pNode1_sub8_s5" style="padding-left:40px;" class="leftTree_sec_font">·<a href="#">应付账款余额查询</a></div>
         </div> 
    </div>  
     
 
</div></div>
</td></tr></table>
</body>
</html>
posted on 2010-07-12 08:54 kevin_20131022 阅读(234) 评论(0) 编辑收藏举报
努力加载评论中...
刷新页面返回顶部
kevin 愛戀 20140103
