ajax实现标签导航

2016-02-19 13:00 15 1 收藏

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

【 tulaoshi.com - Web开发 】

主要函数:
代码如下:

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

来源:https://www.tulaoshi.com/n/20160219/1602739.html

延伸阅读
标签: Web开发
//request.html script type="text/javascript" var xmlHttp; function createXMLHttpRequest() { //创建一个xmlHttpRequest对象     if (window.ActiveXObject) {         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");     }     else if (window.XMLHttpRequest) { &nb...
标签: PHP
概述 实话实说,创建一个聊天的程序不是一个很艰难的程序! 写这篇文章的目的是教你一步一步地用XML作为传输载体来创建一个轻量级的聊天程序。这是一个很有趣的应用,而我写这篇文章的动机也是来自于我平时很喜欢PHP。同时,通过业余时间的钻研,我发现通过Web提供了一个稳定的论坛以后,人们往往希望通过Web能够时间即时的聊天室。这...
标签: Web开发
目的是实现了,个人觉得在执行速度上不是很理想,希望大家帮忙改进,谢谢! 大家知道IE只能一次发送一个Ajax请求,你是否尝试过在一个页面上用Ajax请求多次,虽然可以实现我们发现代码很乱 我们来实现一个在页面呈现缓存的例子吧! //获取Dom function $(id) { return document.getElementById(id); } 思路:我们把要加载的缓存放在一个集合中,...
标签: Web开发
现在.NET的Ajax组件确实不少了,微软的ajax extensions用起来很方便,一个UpdatePanel就可以搞定一切。不过,可能有些朋友更愿意自己来写。那么在.NET里,你是否知道ICallbackEventHandler呢? 大家应该都知道ASP.NET页面调用时的几种方式:Postback/Cross-page posting/Server transfer/Callback,如果你还不太了解,你可以看看MSDN:How to:...
标签: Web开发
1.建立一个aspx页面 html代码 html xmlns="http://www.w3.org/1999/xhtml" head id="Head1" runat="server"     title小山/title     link type="text/css" href="../../Styles/tree_css/tree.css" rel="stylesheet" /head body     form id="Form1" runat...

经验教程

863

收藏

34

精华推荐

Finder多个标签页如何实现?

Finder多个标签页如何实现?

杨漾恋惜君

不用组件实现Ajax效果.(2)

不用组件实现Ajax效果.(2)

潮灬小男

ajax 文件上传应用简单实现

ajax 文件上传应用简单实现

王秀08521

微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部