javascript采用數(shù)組實現(xiàn)tab菜單切換效果
更新時間：2012年12月12日 10:28:14 作者：
最近寫了一個tab菜單,這個也算是web2.0的產(chǎn)物了,沒什么技術含量,練練手而已.需要的朋友可以參考下
最近寫了一個tab菜單,這個也算是web2.0的產(chǎn)物了,沒什么技術含量,練練手而已.
以下是tab菜單的html結構:
<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標簽對應的內(nèi)容.
以下是javascript代碼:
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ù)組,里面是一個標簽題目和標簽內(nèi)容的形式,調(diào)用方式如下:
<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>
差不多完成了,有興趣的朋友可以去測試下.
以下是tab菜單的html結構:
<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標簽對應的內(nèi)容.
以下是javascript代碼:
復制代碼 代碼如下:
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ù)組,里面是一個標簽題目和標簽內(nèi)容的形式,調(diào)用方式如下:
復制代碼 代碼如下:
<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>
差不多完成了,有興趣的朋友可以去測試下.
相關文章
超級susymenu實現(xiàn)top菜單...2007-09-09
JS+CSS共同結合完成的雙級下拉菜單，符合WEB標準，可作為一個標準的實例來掌握。2009-12-12
javascript實現(xiàn)表現(xiàn)、結構、行為分離的選項卡效果！
javascript實現(xiàn)表現(xiàn)、結構、行為分離的選項卡效果！...2007-05-05
二級樹形菜單示例：CSS TreeMenu ，非常漂亮的樹形菜單，用在網(wǎng)站右側比較合適。2010-11-11
利用css+js實現(xiàn)的下拉菜單。通過getElementsByTagName獲取ul,隱藏顯示。2009-05-05
會移動的菜單，層菜單，鼠標放在菜單上，菜單就會移動，上浮的菜單，像是TAB風格的菜單，使用了一張圖片，順著代碼可下載到這張修飾的小圖片,需要的朋友可以參考下2012-12-12
仿新浪微博首頁“大家正在說”漸入輪顯效果，有淡入淡出的效果，新內(nèi)容漸漸滾出來，老內(nèi)容慢慢滾動下去，貌似很新奇的一種方式，從新浪微博獲得。2010-10-10
本節(jié)主要介紹用dtree來實現(xiàn)樹形的菜單，需要的朋友可以參考下。
2011-10-10 
爆炸式的JS圓形浮動菜單特效代碼，點擊主菜單后，子菜單會爆炸式展開，挺有意思的。
2010-03-03