javascript採用數組實作tab選單切換效果_導航選單

最近寫了一個tab選單,這個也算是web2.0的產物了,沒什麼技術含量,練練手而已.

以下是tab選單的html結構:

vhcdsdfd.......... ................

tab1,tab2就是內容,blank是填充剩下的.body是tab標籤對應的內容.

以下是javascript代碼:

複製程式碼 程式碼如下:

sx.activex.tabmenu={
create:function(t){
var au={
create:function(t){
var a= document.createElement("div");
var head=document.createElement("div");
var body=document.createElement("div");
var blank=document.createElement(" span");
a.style.height="200px";
a.style.width="300px";
//a.style.border="1px red solid";
head.style.height="15%";
//head.style.overflow="hidden";
head.style.width="100%";
blank.style.width=100 -20*t.length "%";
blank.style.height="100%";
blank.style.borderBottom="1px red solid";
blank.style.lineHeight=parseInt( a.style.height)*0.15 "px";;
body.innerHTML=t[0][1];
body.style.height="85%";
body.style.padding ="10px";
body.style.border="1px red solid";
body.style.borderTop="0px";
for(var i=0;ivar tab=document.createElement("span");
tab.style.border="1px red solid";
tab.style.width="20%";
tab .style.lineHeight=parseInt(a.style.height)*0.15 "px";
tab.style.textAlign="center";
tab.style.height="100%";
tab .style.backgroundColor="yellow";
tab.style.cursor="hand";
tab.innerHTML=t[i][0];
tab.onclick=function(r){
return function(){
for(var i1 in head.all){
if(head.all[i1]!=this && head.all[i1].tagName=="SPAN")
head.all[i1].style.borderBottom="1px red solid";
this.style.borderBottom="0px";

}
body.innerHTML=t[r] [1];
}
}(i);
head.appendChild(tab);;
}
head.firstChild.style.borderBottom="0px";
head .appendChild(blank);
a.appendChild(head);
a.appendChild(body);
return a;
}

}

} } 傳入的參數t是一個二維數組,裡面是一個標籤題目和標籤內容的形式,調用方式如下:

複製代碼


程式碼如下:










<script> <BR>var a=sx.activex.tabmenu.create([["asd","wewfrwefwe"] ,["we","dsfsdfsdf"]]); <BR></script>

document.body.appendChild(a);
html> 差不多完成了,有興趣的朋友可以去測試下.