AJAX 二级联动菜单

<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 ='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 { background-color:#ddeeFF;height:22px;width:300px;font-size:9pt;color:#000000;padding:2px;text-align:left;cursor:pointer;padding-top:3px; border:1px #FFFFFF solid; border-right:1px #808080 solid; border-bottom:1px #808080 solid;}
      .RssDIV {background-color:transparent;font-size:9pt;padding:2px;display:none}
      A {font-size:9pt;text-decoration:none;color:#000099}
      A:visited {color:red}
      A:active{color:red}
      A:hover {color:#0000FF}
    </style>
</HEAD>
<body style="margin:0;padding:0;border:0;overflow:auto" 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>

posted on 2007-03-29 09:37 mbskys 阅读(697) 评论(0) 收藏举报

AJAX 二级联动 菜单

AJAX 二级联动菜单