ajax实现标签导航

武林争霸2

武林争霸2

2016-02-19 13:00

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐ajax实现标签导航,无聊中的都看过来。
主要函数:
代码如下:

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

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){
   var url = tagid+'_'+x+'.htm';
   var loadstatustext="div class='loading'img src='images/loading.gif' / Loading request content, please wait.../div";
   requestType = tagid;
   CreateXMLHttpRequest();   

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

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);
      }
   }
}

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";
            }             
        }         
   }
}
//--


调用方法:
代码如下:
li style="cursor:pointer" id="tab3" onclick="TabNews('tab',3)"最新折扣信息/li
展开更多 50%)
分享

猜你喜欢

ajax实现标签导航

Web开发
ajax实现标签导航

雅虎、网易ajax标签导航效果实现

Web开发
雅虎、网易ajax标签导航效果实现

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

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

Web开发
Ajax标签导航效果(仿网易首页)

Ajax读取XML实现动态下拉导航

Web开发
Ajax读取XML实现动态下拉导航

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Ajax程序中,自己实现页面前进、后退、与标签功能

电脑网络
Ajax程序中,自己实现页面前进、后退、与标签功能

简单的AJAX实现(HELLO AJAX)

Web开发
简单的AJAX实现(HELLO AJAX)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

开发MIDP联网应用程序

开发MIDP联网应用程序

MPBrowser简易图片浏览器 v1.0

MPBrowser简易图片浏览器 v1.0
下拉加载更多内容 ↓