According to Yaohaixiao's Ajax label Navigation effect: http://www.blueidea.com/tech/web/2006/4144.asp improvements.
Effect:
Http://www.lorlo.com/tab.html
The main is changed JS:
Copy Code code as follows:
<!--
function GetObject (objectId) {
if (document.getElementById && document.getElementById (objectId)) {
The Consortium 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 ();//cache visited data page
var URL;
var mousedelaytime=150;//mouse Sensor Latency
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 ' > Loading ' request content, pleas e 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 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; To cache the data you have accessed
}
}
}
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) {//For Li Plus event ObjID: Container ID tagid: Group ETP: Trigger type 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 ' > The request content, please Wait...</div> ";
GetObject (requesttype+ ' _cnt '). InnerHTML = Loadstatustext;
Tabnews (REQUESTTYPE,IDN);
}}}}
else{iif=0;}
}
}
function ata (ObjID) {///an unrelated functions, for solving a link problem
var as=objid.getelementsbytagname (' a ');
for (Var i=0;i<as.length;i++) {
As[i].pathname= "/showfile.html";
}
}
-->