집 > 기사 > 웹 프론트엔드 > JavaScript는 배열을 사용하여 탭 메뉴 전환 효과_탐색 메뉴를 구현합니다.

JavaScript는 배열을 사용하여 탭 메뉴 전환 효과_탐색 메뉴를 구현합니다.

WBOY원래의: 2016-05-16 17:46:391441검색

최근에 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차원 배열입니다. 호출 방법은 다음과 같습니다. 


 

코드 복사

코드는 다음과 같습니다. < ;html> <제목>

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

document.body.appendChild(a) 

거의 완성됐으니 관심 있는 친구들은 가서 테스트해 보세요.

성명：

이전 기사：자바스크립트 파일의 동기 로딩과 비동기 로딩 구현 원리_javascript 기술다음 기사：자바스크립트 파일의 동기 로딩과 비동기 로딩 구현 원리_javascript 기술

JavaScript는 배열을 사용하여 탭 메뉴 전환 효과_탐색 메뉴를 구현합니다.

관련 기사