skip to content
이글은 웹디자이너를 위한 jquery 에서 추출한 것입니다.
이전에도 아코디언 메뉴에 대한 글을 썻는데요. 자주 써먹은 것중에 하나가 탭메뉴가 아닌가 싶네요.
현재 시점에 제 블로그에도 탭메뉴가 적용이 되어 있는데요.
jquery cookbook 에서 나온 코드를 수정해서 적용한것입니다.

탭메뉴에 대한 글은 현재 두개가 있습니다.
하나는 자바스크립트로 구성된 것이구요. 또하나는 jquery cookbook 에서 만든 코드입니다.
자바스크립트 탭메뉴 =>  http://demun.tistory.com/1696 
jquery cookbook 탭메뉴 =>  http://demun.tistory.com/2125 

오늘은 위와는 조금은 다른 웹디자이너를 위한 jquery 에서 말한 탭메뉴입니다.
여기에는 이미지가 두개가 들어갑니다.
하나는 현재의 탭을 알려주는 이미지고 또하나는 선택되어졌을때 보여지는 이미지 입니다.
물론 이미지가 아닌 색상으로도 표현할 수 있겠죠.


여하튼 전체적인 소스 코드파일을 첨부합니다.

tabmenu.html




여기서는 jquery 부분만 설명하겠습니다.
$(function(){

	// a 태그의 클래스 속성값이 selected 이외의 패널은 숨깁니다. 아래 추가설명 참고.
	$("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide()

	// ul 에 a 를 클릭했을때
	$("ul.tab li a").click(function(){

		// a 에 있는 모든 클래스 selected 를 삭제
		$("ul.tab li a").removeClass("selected");

		// 그리고 현재의 요소에만 selected 클래스 추가.
		$(this).addClass("selected");

		// 탭의 변경에 맞쳐 패널의 표시,비표시를 변경합니다.모든 패널을 비표시합니다.
		$("ul.panel li").hide();

		// $(this).attr("href") 로 클릭된 a 태그의 href 속성을 가져와 같은 이름의 id 속성을 가진 패널을 보여줍니다.
		// 즉 현재의 클릭된 요소만 보여줍니다.
		$($(this).attr("href")).show();

		// 탭에 a 요소로 되어 있어서 클릭했을때 발생하는 click 이벤트를 설정, 이동하지 못하게 합니다.
		return false;
	});
});


// 추가설명.
// class 속성에 selected 가 설정되어 있는 a 태그의 href 속성을 가져옵니다.
$("ul.tab li a.selected").attr("href") 
// 최초의 li 태그안에 a 태그에 selected 라는 클래스를 부여했습니다. 위코드는 #tab1 을 말함으로
$("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")")
// 는 
$("ul.panel li:not(#tab1)") 
// 이 됩니다.

여기까지 모든 설명은 끝입니다.

애니메이션 효과 주기.


위에서는 표시 비표시 즉 show() hide() 였지만 클릭했을때 slideUp("fast") slideDown("fast") 만 변경해주어도 보기 좋은 탭패널이 됩니다.
변경된 파일을 다운로드 받아서 실행해보세요.

tabmenu-1.html


jquery 부분을 보면 아래처럼 변경이 됐습니다.
$(function(){
	$("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide();
	$("ul.tab li a").click(function(){
		$("ul.tab li a").removeClass("selected");
		$(this).addClass("selected");
		$("ul.panel li").slideUp("fast"); // .hide() 가 .slideUp("fast") 로 변경됐음.
		$($(this).attr("href")).slideDown("fast"); // .show() 가 .slideDown("fast") 로 변경됐음.
		return false;
	});
});

코드 하나만 바꿨을 뿐인데...
ㅎㅎㅎㅎ
효과는 큰 차이가 납니다. 
저같아도 제일 처음거 안쓰고 slideUp 효과가 들어간거 쓰겠습니다.


신고

댓글 쓰기

댓글 리스트

  1. sy 2012.08.14 14:31 신고

    좋은 예제네요. 감사해요 :)

    댓글주소 수정/삭제 댓글쓰기
  2. 지나가던퍼블리셔 2014.07.04 17:25 신고

    찾던거에요 ㅠㅠ 정말 심플하고 좋아요! 설명도 친절하고.. 감사합니다!

    댓글주소 수정/삭제 댓글쓰기
  3. wallel 2014.11.04 18:33 신고

    완전 감사합니다.

    댓글주소 수정/삭제 댓글쓰기
  4. 손님 2017.05.20 09:51 신고

    좋은데..이거 모바일에서는 안돼더군요. 웹에서만 가능

    댓글주소 수정/삭제 댓글쓰기

티스토리 툴바