Ajax 另类二级联动菜单(DIV+CSS)

时间:2015/12/3 17:47:00来源:互联网 作者:flyso 点击: 956 次

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
< HTML><HEAD><TITLE>menu</TITLE>
< SCRIPT language=javascript>
    var req = null;
      if(window.XMLHttpRequest) {
          try {
              req = new XMLHttpRequest();
          } catch(e) {
              req = false;
          }
      // branch for IE/Windows ActiveX version
      } else if(window.ActiveXObject) {
          try {
              req = new ActiveXObject("Msxml2.XMLHTTP");
          } catch(e) {
              try {
                  req = new ActiveXObject("Microsoft.XMLHTTP");
              } catch(e) {
                  req = false;
              }
          }
      }
      
    var node;
    function OnClickCate(What,CateID)
    {
      if(What == null) return
      node = document.getElementById("RssCate" + CateID)
      node = node.nextSibling
      while(node && node.tagName && node.tagName != "DIV")
      {
        node = node.nextSibling
      }
      if(node == null) return
      var initDisplay = node.style.display;
      var RssDIV = document.getElementsByTagName("DIV");
      if(RssDIV != null)
      {
        for(var i = 0;i<RssDIV.length;i++)
        {
          if(RssDIV[i].className == "RssDIV")
          RssDIV[i].style.display = "none";
         }
      }
      if(document.getElementById("RssCate" + CateID).getAttribute("status") != "ok")
      {
        if(req)
        {
           var str = null;
           node.innerHTML = "正在装载数据……";
           node.style.display="block";
           surl ='myfile/sample/menulist.asp?id='+CateID+'&cDate='+ new Date().getTime();
           req.open('GET', surl, true);
           req.onreadystatechange = alerttest;
           req.send(null);
        }
        document.getElementById('RssCate'+CateID).setAttribute('status','ok');
      }
      else
      {
        node.style.display=(initDisplay == "block"?"none":"block");
      }
      //node = null;
    }
function alerttest()
{  
  if (req.readyState == 4)
   {
      if (req.status == 200)
       {
           node.innerHTML = req.responseText;
       }
                                                
   }
}
    </SCRIPT>

< STYLE type=text/css>.CateDIV {
    BORDER-RIGHT: #808080 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 9pt; PADDING-BOTTOM: 2px; BORDER-LEFT: #ffffff 1px solid; WIDTH: 300px; CURSOR: pointer; COLOR: #000000; PADDING-TOP: 3px; BORDER-BOTTOM: #808080 1px solid; HEIGHT: 22px; BACKGROUND-COLOR: #ddeeff; TEXT-ALIGN: left
}
.RssDIV {
    PADDING-RIGHT: 2px; DISPLAY: none; PADDING-LEFT: 2px; FONT-SIZE: 9pt; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; BACKGROUND-COLOR: transparent
}
A {
    FONT-SIZE: 9pt; COLOR: #000099; TEXT-DECORATION: none
}
A:visited {
    COLOR: red
}
A:active {
    COLOR: red
}
A:hover {
    COLOR: #0000ff
}
< /STYLE>

< META content="MSHTML 6.00.3790.1830" name=GENERATOR></HEAD>
< BODY
style="BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: auto; BORDER-LEFT: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px"
bgColor=#ffffff>
< DIV class=CateDIV id=RssCate1 onclick=OnClickCate(this,1)>Microsoft .NET
技术站点</DIV>
< DIV class=RssDIV></DIV>
< DIV class=CateDIV id=RssCate2 onclick=OnClickCate(this,2)>ASP.NET 技术站点</DIV>
< DIV class=RssDIV></DIV>
< DIV class=CateDIV id=RssCate3 onclick=OnClickCate(this,3)>Visual C# 技术站点</DIV>
< DIV class=RssDIV></DIV>
< DIV class=CateDIV id=RssCate4 onclick=OnClickCate(this,4)>Visual Basic.NET
技术站点</DIV>
< DIV class=RssDIV></DIV></BODY></HTML>

Copyright © 2005 - 2016 flyso.cn. 飞搜 版权所有 鄂ICP备11002783号-3