Tabs

jquery를 이용한 Tab menu 구현..

AAAAA

script

$(document).ready(function(){
	// tab
	function init_tabs() {
		//요소가 존재하는가?
		if(!$('ul.tabs').length){
			//요소가 존재하지 않는다면 함수를 빠져나간다.
			return;
		}
		// 초기 콘텐츠 영역을 보여준다.
		$('div.tab_content_wrap').each(function(){
			$(this).find('div.tab_content:first').show();
		});
		// 텝에 대한 클릭 이벤트
		$('ul.tabs a').click(function() {   
			// current 탭이 존재하지 않는 경우
			if (!$(this).hasClass('current'))
			{
				// current 표시기를 변경한다.
				$(this).addClass('current').parent('li').siblings('li').find('a.current').removeClass('current');

				//대상을 보여준 후 나머지 요소들을 숨긴다.
				$($(this).attr('href')).show().siblings('div.tab_content').hide();      
			}
			// 링크로 이동하지 않는다.
			this.blur();
			return false;
		});
	}	
	init_tabs();
});
						

css

.tabs{width:100%;zoom:1;border-bottom:1px solid #ccc;}
.tabs:after{content:""; display:block; clear:both;}
.tabs li{float:left;margin-right:5px;}
.tabs li a{display:inline-block;padding:1px 20px;border:1px solid #ccc;border-bottom:none;border-top-left-radius:5px;border-top-right-radius:5px;}
.tabs li a.current{position:relative;top:1px;background:#ccc;color:#fff;font-weight:bold;}
.tab_content_wrap{margin-bottom:50px;border:1px solid #ccc;border-top:none;background:#ccc;color:#fff;}
.tab_content {padding:10px;}
						

html


AAAAA