• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Ajax标签导航效果(仿网易首页)
    根据yaohaixiao的Ajax标签导航效果:http://www.blueidea.com/tech/web/2006/4144.asp改进。
    效果:
    http://www.lorlo.com/tab.html

    主要是改了JS:
    复制代码 代码如下:

    !--
    function getObject(objectId) {
         if(document.getElementById  document.getElementById(objectId)) {
        // W3C DOM
           return document.getElementById(objectId);
         } 
         else if (document.all  document.all(objectId)) {
        // MSIE 4 DOM
           return document.all(objectId);
         } 
         else if (document.layers  document.layers[objectId]) {
        // NN 4 DOM.. note: this won't find nested layers
           return document.layers[objectId];
         } 
         else {
           return false;
        }


    var responsecont;
    var xmlHttp;
    var requestType;
    var newsstring;
    var ajccache=new Object();//缓存已访问的数据页面
    var url;
    var MouseDelayTime=150;//鼠标感应延迟
    var waitInterval;

    function CreateXMLHttpRequest(){
       // Initialize Mozilla XMLHttpRequest object
       if (window.XMLHttpRequest){
           xmlHttp = new XMLHttpRequest();
       } 
       // Initialize for IE/Windows ActiveX version
       else if (window.ActiveXObject) {
           try{
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP.3.0");
           } 
           catch (e){
                try{
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e){newsstring = "div class='loading'>Loading rquest content fail, Please try it again latter.../div>";}
           }
       }
    }

    function getnews(tagid,x){
       url = "tab/"+tagid+'_'+x+'.html';
    //   var loadstatustext="div class='loading'>img src='images/loading.gif' /> Loading request content, please wait.../div>";
       requestType = tagid;


    if(ajccache[url]==null){
       CreateXMLHttpRequest();   

    //   getObject(requestType+'_cnt').innerHTML = loadstatustext;
       xmlHttp.onreadystatechange = processRequestChange;
       xmlHttp.open("GET", url, true);
       xmlHttp.setRequestHeader("If-Modified-Since","0");
       xmlHttp.send(null);  
    }
    else
    {  shownews(requestType,ajccache[url]);    }
    }

    function processRequestChange(){
       // only if xmlHttp shows "complete"
       if (xmlHttp.readyState == 4){
          // only http 200 to process
          if (window.location.href.indexOf("http")==-1 || xmlHttp.status == 200){
             newsstring = xmlHttp.responseText;
             //inject centent to tab-pane
                shownews(requestType,newsstring);
                ajccache[url]=newsstring;    //把已访问的数据缓存下来
          }
       }
    }

    function shownews(requestType,newsstring){
    //![CDATA[
        responsecont = getObject(requestType+'_cnt');
        responsecont.innerHTML = newsstring;
    //]]>
    }

    function TabNews(tagid,x){
        for (var i=1;i=7;i+=2) {
             if (i == x) {
                getObject(tagid+i).className="tabactive"+i;
                if(i!=1){
                   getObject(tagid+(i-1)).style.display="none";               
                   if(i!=7){
                      getObject(tagid+(i+1)).style.display="none";
                   }                 
                }
                if(i==1){
                   getObject(tagid+"2").style.display="none";
                } 
                try{            
                   getnews(tagid,i);
                }
                catch(e){
                   alert(e);
                }  
            }
            else
            {
                getObject(tagid+i).className="";            
                if(i!=7){
                   getObject(tagid+(i+1)).style.display="block";
                }             
            }         
       }
    }

    var idn;

    function aet(objid,tagid,etp){    //为LI加上事件    objid:容器ID  tagid:组别   etp:触发类型 0-onmouseover 1-onclick
        var iif=0;
        var lis=objid.getElementsByTagName('li');
        requestType=tagid;
        url = "tab/"+requestType+"_1.html";
        ajccache[url]=getObject(requestType+'_cnt').innerHTML;
        for(var iy=0;iylis.length;iy++){
            if(iif==0){
            iif=1;
            with(lis[iy]){
            if(etp==0){
            lis[iy].onmouseover=function(){
                        if(this.status=="active") return;
                        requestType=attributes.getNamedItem('id').value.substring(0, attributes.getNamedItem('id').value.length-1);
                        idn=parseInt(attributes.getNamedItem('id').value.substring(attributes.getNamedItem('id').value.length-1, attributes.getNamedItem('id').value.length));
                        clearTimeout(waitInterval);
                        waitInterval=window.setTimeout("TabNews(requestType,idn);",MouseDelayTime);
                }
            lis[iy].onmouseout=function(){if(this.status=="active") return;clearTimeout(waitInterval);}
            } 
            if(etp==1){
            lis[iy].onmouseover=function(){}
            lis[iy].onclick=function(){
                        if(this.status=="active") return;
                        requestType=attributes.getNamedItem('id').value.substring(0, attributes.getNamedItem('id').value.length-1);
                        idn=parseInt(attributes.getNamedItem('id').value.substring(attributes.getNamedItem('id').value.length-1, attributes.getNamedItem('id').value.length));
                        var loadstatustext="div class='loading'>img src='images/loading.gif' /> Loading request content, please wait.../div>";
                        getObject(requestType+'_cnt').innerHTML = loadstatustext;
                        TabNews(requestType,idn);
                }}}}
            else{iif=0;}
        }



    function ata(objid){    //一个无关的函数,为解决一个链接问题
    var as=objid.getElementsByTagName('a');
    for(var i=0;ias.length;i++){
    as[i].pathname="/showfile.html";
    }

    }
    //-->

    上一篇:Ajax 和 Asp 的编程
    下一篇:AJAX应用之草稿自动保存
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Ajax标签导航效果(仿网易首页) Ajax,标签,导航,效果,仿,