Phiên bản đầy đủ: jsB@nk » Trình đơn » Trình đơn nhiều cấp » Menu kiểu tab
URL: https://www.javascriptbank.com/tag-mover-menu.html
Một đoạn mã JavaScript khác để tạo một trình đơn với các mục chọn như là các tab. Mỗi khi người dùng rê con trỏ chuột đến thì mục chọn sẽ hiển thị nội dung bên trong cùng màu nền tương ứng.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Trình đơn nhiều cấp » Menu kiểu tab
URL: https://www.javascriptbank.com/tag-mover-menu.html
<SCRIPT>//detecting browser to dynamically write appropriate DIVs/LAYERsN=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)<5)S=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)>4.9)M=(navigator.appName.indexOf('Microsoft')!=-1)Vis=new Array()Vis[0]=(M||S) ? "hidden" : "hide"Vis[1]=(M||S) ? "visible" : "show"function GetDiv(divId,divY,divX,divW,divH,bCol,visb,zInd){bkCol=(bCol!="")?((N)?" bgColor="+bCol:";background:"+bCol):""Styl = (M||S) ? "<DIV" : "<LAYER"if(M||S){Styl+=" ID="+divIdStyl+=" style='position:absolute;top:"+divY+";left:"+divX+";width:"+divW+";height:"+divH+bkColStyl+=";visibility:"+Vis[visb]+";z-index:"+zIndStyl+="'>"}if(N){Styl+=" ID="+divIdStyl+=" top="+divY+" left="+divX+" width="+divW+" height="+divH+bkColStyl+=" visibility="+Vis[visb]+" z-index="+zIndStyl+=">"}document.writeln(Styl)}function EndDiv(){(M||S)? document.writeln("</DIV>"): document.writeln("</LAYER>")}function PutIt(ID,dX,dY){if(N){document.layers[ID].left=dXdocument.layers[ID].top=dY}if(M){document.all[ID].style.left=dXdocument.all[ID].style.top=dY}if(S){document.getElementById(ID).style.left=dXdocument.getElementById(ID).style.top=dY}}function ShowHide(ID,vs){if(N){document.layers[ID].visibility=Vis[vs]}if(M){document.all[ID].style.visibility=Vis[vs]}if(S){document.getElementById(ID).style.visibility=Vis[vs]}}function Xof(ID){if(N){return document.layers[ID].left}if(M){return document.all[ID].style.left}if(S){return document.getElementById(ID).style.left}}function Yof(ID){if(N){return document.layers[ID].top}if(M){return document.all[ID].style.top}if(S){return document.getElementById(ID).style.top}}function Zind(ID,zz){if(N){document.layers[ID].zIndex=zz}if(M){document.all[ID].style.zIndex=zz}if(S){document.getElementById(ID).style.zIndex=zz}}function ChangeCol(ID,colrx){if(M)document.all[ID].style.background=colrxif(N)document.layers[ID].bgColor=colrxif(S)document.getElementById(ID).style.background=colrx}function DivWrite(IdName,Str) {if (N){document.layers[IdName].document.write(Str)document.layers[IdName].document.close()}if(M) document.all[IdName].innerHTML=Strif(S) document.getElementById(IdName).innerHTML=Str}</SCRIPT><SCRIPT>// The laydiv.js hold all the functions like GetDiv(), EndDiv(0 and ShowHide() etc,...// These are used to create and manipulate the layers (for netscape) and divs (for others)Tabs=new Array("HOME","GAMES","BUSINESS","CONTACT","COMPANY","PERSONAL")Panes=new Array()Panes[0]=new Array("Address","Telephone","Menu")Panes[1]=new Array("Tetris","Pokamon","Chess","Limits","Prison")Panes[2]=new Array("Petrol","Housing","Trades","Finanace","Banking")Panes[3]=new Array("Mr. Big","Mr. Small","Mrs. Bond")Panes[4]=new Array("Big & Co.","Small Guys","Tiny Tods","Lim & Lin")Panes[5]=new Array("Diary","Calendar","Telephone","Internet")function GetMe(p){for(i=0;i<Tabs.length;i++){if(M)document.all[Tabs[i]].style.background=(i==p)?'cyan':'lime'if(N)document.layers[Tabs[i]].bgColor=(i==p)?'cyan':'lime'if(S)document.getElementById(Tabs[i]).style.background=(i==p)?'cyan':'lime'ShowHide("Pane"+i,(i==p)?1:0)}}for(x=0;x<Tabs.length;x++){GetDiv(Tabs[x],20,50+100*x,100,25,'lime',1,1)document.write("<a href=# onmouseover='GetMe("+x+")'>"+Tabs[x]+"</a>")EndDiv()GetDiv("Pane"+x,45,50,600,50,'cyan',1,0)for(y=0;y<Panes[x].length;y++){document.write(" . <a href=#>"+Panes[x][y]+"</a> ")}EndDiv()}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->