Heim > Web-Frontend > js-Tutorial > javascript采用数组实现tab菜单切换效果_导航菜单

javascript采用数组实现tab菜单切换效果_导航菜单

WBOY
Freigeben: 2016-05-16 17:46:39
Original
1482 Leute haben es durchsucht

最近写了一个tab菜单,这个也算是web2.0的产物了,没什么技术含量,练练手而已.

以下是tab菜单的html结构:


tab1,tab2就是内容,blank是填充剩下的.body是tab标签对应的内容.

以下是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;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是一个二维数组,里面是一个标签题目和标签内容的形式,调用方式如下:
复制代码 代码如下:



Untitled Document





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



差不多完成了,有兴趣的朋友可以去测试下.
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage