zoukankan      html  css  js  c++  java
  • Ajax 另类二级联动菜单(DIV+CSS)

    <!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>

  • 相关阅读:
    2 3 5 7的倍数
    三角形面积
    数塔取数问题
    拼成最小的数
    JMeter使用总结
    jmeter+ant生成报告(ubuntu环境)
    LINUX常用命令,不定时更新
    oracle语句使用总结
    "the import org.junit can not be resolved"解决办法
    [SWPUCTF 2018]SimplePHP
  • 原文地址:https://www.cnblogs.com/ly5201314/p/1327217.html
Copyright © 2011-2022 走看看