JavaScript는 배열을 사용하여 탭 메뉴 전환 효과_탐색 메뉴를 구현합니다.
- WBOY원래의
- 2016-05-16 17:46:391490검색
최근에 web2.0의 산물이라 할 수 있는 탭 메뉴를 작성했습니다. 기술적인 내용은 없고 단지 연습용입니다.
다음은 탭 메뉴의 html 구조입니다:
< div id="a">
vhc dsdfd.........................
tab1 및 tab2는 내용이고, 공백은 탭 태그에 해당하는 내용입니다. 🎜>
다음은 자바스크립트 코드입니다:
코드 복사 코드는 다음과 같습니다.
sx.activex.tabmenu={
create:function(t){
var a=document.createElement("div")
var head=document.createElement( "div");
var body=document.createElement( "div");
var 공백=document.createElement("span")
a.style.height="200px"; >a.style.width="300px";
/ /a.style.border="1px 빨간색 단색"
head.style.height="15%"
//head.style .overflow="숨김";
head.style.width ="100%";
blank.style.width=100-20*t.length "%"
blank.style.height= "100%";
blank.style.borderBottom=" 1px 빨간색 솔리드";
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 빨간색 단색" ;
body.style.borderTop="0px";
for(var i=0;ivar tab=document.createElement("span"); >tab.style.border="1px 빨간색 단색";
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="노란색"
tab.style.cursor=" hand";
tab.innerHTML=t[i][ 0];
tab.onclick=function(r){
return function(){
for(head.all의 var i1) {
if(head.all[i1]!=this && head.all[i1].tagName=="SPAN")
head.all[i1].style.borderBottom="1px 빨간색 솔리드";
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는 라벨 제목과 라벨 내용을 포함하는 2차원 배열입니다. 호출 방법은 다음과 같습니다.
create:function(t){
var a=document.createElement("div")
var head=document.createElement( "div");
var body=document.createElement( "div");
var 공백=document.createElement("span")
a.style.height="200px"; >a.style.width="300px";
/ /a.style.border="1px 빨간색 단색"
head.style.height="15%"
//head.style .overflow="숨김";
head.style.width ="100%";
blank.style.width=100-20*t.length "%"
blank.style.height= "100%";
blank.style.borderBottom=" 1px 빨간색 솔리드";
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 빨간색 단색" ;
body.style.borderTop="0px";
for(var i=0;i
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="노란색"
tab.style.cursor=" hand";
tab.innerHTML=t[i][ 0];
tab.onclick=function(r){
return function(){
for(head.all의 var i1) {
if(head.all[i1]!=this && head.all[i1].tagName=="SPAN")
head.all[i1].style.borderBottom="1px 빨간색 솔리드";
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는 라벨 제목과 라벨 내용을 포함하는 2차원 배열입니다. 호출 방법은 다음과 같습니다.
코드 복사
코드는 다음과 같습니다. < ;html> <제목>
document.body.appendChild(a)