Maiji의 TAB 전환 기능은 javascript와 css_navigation 메뉴를 결합합니다.-JS 튜토리얼-php.cn

Maiji의 TAB 전환 기능은 javascript와 css_navigation 메뉴를 결합합니다.

WBOY

풀어 주다： 2016-05-16 19:07:11

원래의

1056명이 탐색했습니다.

인터넷에 이런거 많이 있는데 친구들이 내 프로그래밍 컨셉이 좋다고 해서(히...) 탭 스위치도 썼고, 뻔뻔하게 마이지 TAB 스위치라고 불렀다(죄송합니다.) , Mark Maiji의 블로그를 다시 인쇄해 보세요. 아래에서 시작해 보세요.
미닫이문을 만들려면 이미지가 필요합니다.
Maiji의 TAB 전환 기능은 javascript와 css_navigation 메뉴를 결합합니다.
CSS

코드 복사 코드는 다음과 같습니다.

.nav{position:relative} 
.nav dt{float:left; 0 2px 0 0; 위치: 상대; z-index:2} 
.nav dt a{color:#555; text-장식:none} 
.nav dt a:hover{color:#000} 🎜>.nav dt a{ 
 float:left; height:24px; line-height:26px; Overflow:hidden; 
 background:url(/upload/20071217200212700.gif) 반복 없음 -24px 
} 
.nav dt a 범위{ 
 디스플레이: block; padding:0 15px 0 0; margin:0 0 0 15px; background:url(/upload/20071217200212700.gif) 반복 없음 오른쪽 -24px 
} 
.nav dt.on a{배경 위치:0 0} 
.nav dt.on a 범위{배경 위치:오른쪽 0} 
.nav dd{ 
 배경: #fff; 너비: 400px; 여백: 10px; 위치: 절대: 23px; 가시성:숨김 
} 
.nav dd.on{visibility:visible} 

/*-_-!*/ 
.nav dd a{display:block}


xhtml 

코드 복사 코드는 다음과 같습니다.

< ;span>훌륭한 기사

동영상

< ;a href="#this" href="#this" onclick="maiji_tab(2)">사진

McChicken의 블로그< /span>< ;/a>

훌륭한 기사입니다!Maji의 블로그에 오신 것을 환영합니다!

< ;/dd>

동영상!Maji 블로그에 오신 것을 환영합니다!

사진은 어디에 있나요?< ;a href=”http://www.wler.cn/blog” href=”http://www.wler.cn/blog” target=”_blank”>Maji의 블로그에 오신 것을 환영합니다!

🎜>

코드는 다음과 같습니다.

var maiji_tab = function(num){//mun에 따라 클래스를 추가하여 표시하도록 합니다. 
var dtArray = document.getElementById('maiji_tab').getElementsByTagName("dt");//Get 노드 
var ddArray = document.getElementById('maiji_tab').getElementsByTagName("dd"); 
for (var i = 0; i < ddArray.length; i ){ 
 dtArray[i ].className = '';//클래스 취소 
 ddArray[i].className = '' 
} 
 dtArray[num].className = 
 ddArray[num]; className = 'on';//클래스 추가 
}

데모 주소