Ajax 另類二級聯動菜單(DIV+CSS)

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Flywe の Blog - Ajax 另類二級聯動菜單(DIV+CSS)</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 ='cs/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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More