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

  • 相关阅读:
    第一个JAVA程序
    python小项目(python实现鉴黄)源码
    整蛊小病毒,自己拿来快乐
    JavaScript(这里主要侧重于 JavaScript HTML DOM)杂项
    图片与文本基础(html和css)
    CSS的基础学习
    Javascript中this作用域以及bind方法的重写
    斐波那契数列算法求解及速度
    javascript中的描述对象(Descriptor)获取和定义随笔
    vue-cli3生产环境和开发环境路径的替换
  • 原文地址:https://www.cnblogs.com/ly5201314/p/1327217.html
Copyright © 2020-2023  润新知