ajax实现标签导航

ajax

主要函数:
[复制此代码]CODE:
<!--
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='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";
            }             
        }         
   }
}
//-->

调用方法:
[复制此代码]CODE:<li style="cursor:pointer" id="tab3" >最新折扣信息</li>

时间: 2024-08-22 14:58:40

ajax实现标签导航的相关文章

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

ajax|导航|雅虎 经过多次改进,可以在普通网站上直接使用了,现在发布源程序下载(编码为utf-8,改为gb3212的方法是:用记事本打开,另存时选择相应的编码),希望对大家有用(虽然不一定实用).因为只是标签导航,所有内容还会在频道页中体现,所在全部用AJAX读取. 功能的实现思路: 雅虎中国 单击触发 <A>块锁定:a{display:block;height:16px;}/*将A锁定为块级,再定义高度和宽度*/ 再次单击弹出链接:在<A>标记的onclick事件中需要执行读

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

ajax 根据yaohaixiao的Ajax标签导航效果:http://www.blueidea.com/tech/web/2006/4144.asp改进.效果:http://www.lorlo.com/tab.html主要是改了JS:[复制此代码]CODE:<!-- function getObject(objectId) {      if(document.getElementById && document.getElementById(objectId)) {     //

Ajax标签导航效果

ajax function.js   <!--function getObject(objectId) {     if(document.getElementById && document.getElementById(objectId)) {    // W3C DOM       return document.getElementById(objectId);     }      else if (document.all && document.all(

Ajax标签导航效果(仿网易首页)_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

iOS开发那些事-nib实现标签导航

nib实现标签导航 在目前的Xcode(4.5)版本创建标签导航的应用可以使用工程模板 Tabbed Application.我们可以选择故事板或nib技术实现.故事板创建固然简单,但这种实现方式屏蔽了标签导航很多技术细节,为了更有益于我们学习, 在实现环节我们分别采用了nib技术和storyboard技术.首先我们来看看用nib技术实现的过程. 使用"Tabbed Application"模版创建一个名为 "TabNavigationNib"的工程.注意不要勾选&

iOS开发那些事-故事板实现标签导航

故事板实现标签导航 用故事板技术实现标签导航模式. 使用"Tabbed Application"模版,创建一个名为 "TabNavigationStoryborad"的工程.勾选"Use Storyborads"."Use Automatic Reference Counting".创建完成之后打开MainStoryboard.storyboard. 三个Controller Scene 会有由一些线连接起来,这些线就是Seg

《jQuery Mobile快速入门》—— 2.3 Ajax驱动的导航

2.3 Ajax驱动的导航 jQuery Mobile快速入门在上面提到的多页面案例中(见程序清单2-3),我们了解到jQuery Mobile如何从一个内部页面导航到另外一个内部页面.当多页面文档在初始化时,内部页面已经添加到DOM中,这样从一个内部页面转换到另外一个页面时,速度才会相当快.在从一个页面导航到另外一个页面时,我们可以配置要应用的页面转换类型.默认情况下,框架会为所有的转换应用一个"滑动(slide)"效果.在本章后面,我们会讨论可以选择的转换和转换类型. 当一个单页面

angularjs+bootstrap标签导航跳转问题

问题描述 angularjs+bootstrap标签导航跳转问题 网上教程 Tab 插件是用标签,但是angularjs用路由 otherwise({ redirectTo: '/' }); 点击链接都会跳转到指定页面,这个要怎么解决? 解决方案 http://blog.csdn.net/zoutongyuan/article/details/39431299

抛石头引玉:自制的Tab多标签导航栏。

三行三列Tab标签,以iframe作为内容导航窗口.很粗糙了,见笑,如果哪位高手知道如何使整行标签全部移动的最好方法,请一定不忘贴出.index.htm     //主文件<!-- by firefly , johnikis@sohu.com --><!-- on May 29 , 2002 --><html><head><meta http-equiv="Content-Type" content="text/html;