Ajax标签导航效果(仿网易首页)
根据yaohaixiao的Ajax标签导航效果:http://www.blueidea.com/tech/web/2006/4144.asp改进。
效果:
http://www.lorlo.com/tab.html
主要是改了JS:
效果:
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;iy<lis.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;i<as.length;i++){ as[i].pathname="/showfile.html"; } } //-->
相关推荐
坚持着执着 2020-07-16
坚持着执着 2020-06-14
kentrl 2020-11-10
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03
TONIYH 2020-07-22
时光如瑾雨微凉 2020-07-19
83510998 2020-07-18
jiaguoquan00 2020-07-07
李永毅 2020-07-05