According to the Ajax tag navigation Effect of yaohaixiao: http://www.blueidea.com/tech/web/2006/4144.asp.
Effect:
Http://www.lorlo.com/tab.html
Mainly changed JS:
Copy codeThe Code is as follows:
<! --
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 (); // cache the accessed Data Page
Var url;
Var MouseDelayTime = 150; // mouse-induced delay
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, 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 the 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; // cache the accessed Data
}
}
}
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) {// Add event objid to LI: container ID tagid: group etp: trigger type 0-onmouseover 1-onclick
Var iif = 0;
Var lis = objid. getElementsByTagName ('lil ');
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'> loading request content, please wait... </div> ";
GetObject (requestType + '_ cnt'). innerHTML = loadstatustext;
TabNews (requestType, idn );
}}}}
Else {iif = 0 ;}
}
}
Function ata (objid) {// an unrelated function.
Var as = objid. getElementsByTagName ('A ');
For (var I = 0; I <as. length; I ++ ){
As [I]. pathname = "/showfile.html ";
}
}
// -->