<!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> <link href="style2.css" rel="stylesheet" type="text/css" /> <script language="JavaScript"> var number=2; function LMYC(obj) { var lbmc var treePic for (i=1;i<=number;i++) { lbmc = document.getElementById('LM' + i); treePic = document.getElementById('treePic'+i); treePic.className = 'lmenub'; lbmc.style.display = 'none'; } } function ShowFLT(i) { lbmc = document.getElementById('LM' + i); treePic = document.getElementById('treePic' + i) if (lbmc.style.display == 'none') { LMYC(); treePic.className = 'lmenua'; lbmc.style.display = ''; } else { treePic.className = 'lmenub'; lbmc.style.display = 'none'; } } var n=4; function LMYCB(obj) { var lbmcb var treePicb for (i=1;i<=n;i++) { lbmcb = document.getElementById('LMb' + i); treePicb = document.getElementById('treePicb'+i); treePicb.className = 'lmenud'; lbmcb.style.display = 'none'; } } function ShowFLTb(i) { lbmcb = document.getElementById('LMb' + i); treePicb = document.getElementById('treePicb' + i) if (lbmcb.style.display == 'none') { LMYCB(); treePicb.className = 'lmenuc'; lbmcb.style.display = ''; } else { treePicb.className = 'lmenud'; lbmcb.style.display = 'none'; } } function checkTdBg(obj){ var obj_td = document.getElementsByTagName('span'); for( var int_i = 0 ; int_i < obj_td.length ; int_i ++ ){ if( obj_td[int_i] == obj ){ obj_td[int_i].className = 'active'; } else{ obj_td[int_i].className = ''; } } } </script> <style> a{color:#333; text-decoration:none;} a:hover{color:#FF0033;} body{font-family: "宋体";font-size:12px; margin:0; padding:0;} ul{list-style-type:none; margin:0; padding:0;} li{margin:0; padding:0;} .leftmenu{background:#EEF2FB;height:auto;margin:0 auto; width:182px;border:1px solid #73C2FF;} .lmenub{background:url(http://bbs.blueidea.com/attachment.php?aid=117261&k=d6565eadc3b2be5a78f560c9e7f49581&t=1240970983&noupdate=yes) no-repeat left;height:25px; line-height:25px;color:#4B6486; font-size:14px; font-weight:700;text-align:left; text-indent:19px; cursor:pointer;} .lmenua{background:url(http://bbs.blueidea.com/attachment.php?aid=117262&k=9981f86f0f8e995aa7ff79bc5586bd81&t=1240970983&noupdate=yes) no-repeat;17px;height:25px; line-height:25px;color:#4B6486; font-size:14px; font-weight:700;text-align:left; text-indent:19px; cursor:pointer;} .lmenuc{border-bottom:1px solid #A1B7CE; background:url(http://bbs.blueidea.com/attachment.php?aid=117260&k=bd3321ea3c1c02ff5570951500e7dc5e&t=1240970983&noupdate=yes) repeat-x left;font-size:12px;height:22px;line-height:22px;cursor:pointer; text-indent:20px; color:#222; font-weight:700;} .lmenud{font-size:12px;height:22px;line-height:22px;background:#E5F5FF;text-indent:10px;border-top: 1px solid #fff;border-bottom: 1px solid #A9DAFF; font-weight:normal;cursor:pointer; text-indent:20px;} .pclist{height:200px; overflow-y:scroll; background:#fff; width:164px; padding:5px 2px 5px 17px;} .pclist li{background:url(http://bbs.blueidea.com/attachment.php?aid=117259&k=1a1e02d41c7c0fa55788ba52cdf7e05b&t=1240970983&noupdate=yes) no-repeat 0 5px;height:22px; line-height:22px; font-size:12px; padding-left:17px;} .pclist .active{background:#FFFFCC; height:15px; border:1px solid #CEB70D; padding:1px 3px;} </style> </head> <body style="background:#EEF2FB;"> <div class="leftmenu"> <div class="lmenua" id="treePic1" onClick="javascript:ShowFLT(1)">一级菜单A</div> <div id="LM1" > <div class="lmenuc" id="treePicb1" onClick="javascript:ShowFLTb(1)">文管产品</div> <div id="LMb1" class="pclist "> <ul> <li><span onclick='checkTdBg(this);' class="active"><a href="#">SCP1A</a></span></li> <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li> <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li> <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li> <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li> <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li> <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li> <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li> <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li> <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li> <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li> <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li> <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li> <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li> <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li> </ul> </div> <div class="lmenud" id="treePicb2" onClick="javascript:ShowFLTb(2)">未分组</div> <div id="LMb2" class="pclist" style="display:none;"> <ul> <li><span onclick='checkTdBg(this);'>SCP1A</span></li> <li><span onclick='checkTdBg(this);'>SCP1A</span></li> <li><span onclick='checkTdBg(this);'>SCP1A</span></li> <li><span onclick='checkTdBg(this);'>SCP1A</span></li> <li><span onclick='checkTdBg(this);'>SCP1A</span></li> <li><span onclick='checkTdBg(this);'>SCP1A</span></li> </ul> </div> </div> <div class="lmenub" id="treePic2" onClick="javascript:ShowFLT(2)">一级菜单B</div> <div id="LM2" style="display:none;"> <div class="lmenud" id="treePicb3" onClick="javascript:ShowFLTb(3)">桌面文具</div> <div id="LMb3" class="pclist" style="display:none;"> <ul> <li><span onclick='checkTdBg(this);'>SCP1A</span></li> <li><span onclick='checkTdBg(this);'>SCP1A</span></li> <li><span onclick='checkTdBg(this);'>SCP1A</span></li> <li><span onclick='checkTdBg(this);'>SCP1A</span></li> <li><span onclick='checkTdBg(this);'>SCP1A</span></li> <li><span onclick='checkTdBg(this);'>SCP1A</span></li> </ul> </div> <div class="lmenud" id="treePicb4" onClick="javascript:ShowFLTb(4)">文管产品</div> <div id="LMb4" class="pclist" style="display:none;"> <ul> <li><span onclick='checkTdBg(this);'>SCP1A</span></li> <li><span onclick='checkTdBg(this);'>SCP1A</span></li> <li><span onclick='checkTdBg(this);'>SCP1A</span></li> <li><span onclick='checkTdBg(this);'>SCP1A</span></li> <li><span onclick='checkTdBg(this);'>SCP1A</span></li> <li><span onclick='checkTdBg(this);'>SCP1A</span></li> </ul> </div> </div> </div> </body> </html>
