快捷導(dǎo)航

javascript采用數(shù)組實(shí)現(xiàn)tab菜單切換效果

更新時間：2012年12月12日 10:28:14 作者：

最近寫了一個tab菜單,這個也算是web2.0的產(chǎn)物了,沒什么技術(shù)含量,練練手而已.需要的朋友可以參考下

最近寫了一個tab菜單,這個也算是web2.0的產(chǎn)物了,沒什么技術(shù)含量,練練手而已.

以下是tab菜單的html結(jié)構(gòu):
<div id="a"><div id="head"><span id="tab1">vhc</span><span id="tab2">dsdfd</span>..........................<span id="blank"></span></div><div id="body"></div></div>
tab1,tab2就是內(nèi)容,blank是填充剩下的.body是tab標(biāo)簽對應(yīng)的內(nèi)容.

以下是javascript代碼:

復(fù)制代碼代碼如下:

 
sx.activex.tabmenu={ 
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;i<t.length;i++){ 
var 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; 
} 
} 

傳入的參數(shù)t是一個二維數(shù)組,里面是一個標(biāo)簽題目和標(biāo)簽內(nèi)容的形式,調(diào)用方式如下:

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>Untitled Document</title> 
</head> 
<body> 

<script src="kongjian.js"></script> 

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

document.body.appendChild(a); 

</script> 
</body> 
</html> 

差不多完成了,有興趣的朋友可以去測試下.

您可能感興趣的文章: