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

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

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';//클래스 추가
}

데모 주소