/*
 * 함수명 : showTab
 * 설명 : 탭 클릭 시 해당 콘텐츠 block 처리 
 * 사용법 : 탭 각각에 넣어줄 링크 - 
 			  첫번째값 탭을 감싸는 id, 두번째값 불러올 콘텐츠 영역 id의 영문명, 세번째값 두번째값불러올 콘텐츠 영역 id의 숫자
 */
var showTab = function(tabName,contId,num){
	var last = $("#"+tabName+">li").length;  //tab 개수

	for(var i=1; i<=last;i++){
		if (i == num){
			var order = num-1;
			var $eqImg = $("#"+tabName+">li").eq(order).find("img");
			$("#"+contId+num).css("display","block").attr("tabindex","0").focus().css("outline","0").removeAttr("tabindex"); //활성화된 탭으로 포커스 이동, div등은 포커스 가능한 엘리먼트가 아니므로 tabindex=0으로 포커스가 가능하게 하고 포커스 직흐 탭인덱스 속성 제거
			$eqImg.attr("src",$eqImg.attr("src").replace("_off","_on"));
			$("#"+contId+num).find(":focusable:last").bind("keydown",function(e){
				 if(e.keyCode == 9 && !e.shiftKey && num != last){
					 $("#"+tabName).find(">li").eq(num-1).find("a").focus();
		         }
			 });
		} else {
			var order2 = i-1;
			var $tabImg = $("#"+tabName+">li").eq(order2).find("img");
			$("#"+contId+i).css("display","none");
			$tabImg.attr("src",$tabImg.attr("src").replace("_on","_off"));
		}
	}
};

<ul class="tab_menu" id="boardTab">
    <li><a href="#" onclick="showTab('boardTab','contTab','1'); return false;"><img src="${IMAGE_URL}/dutyfree/common/tab_01_on.gif" alt="notice" /></a></li>
    <li><a href="#" onclick="showTab('boardTab','contTab','2'); return false;"><img src="${IMAGE_URL}/dutyfree/common/tab_02_off.gif" alt="event" /></a></li>
</ul>

<div class="tab_01" id="contTab1">
    <h3 class="blind">공지사항</h3>
</div>
<div class="tab_02" id="contTab2" style="display:none;>
    <h3 class="blind">공지사항</h3>
</div>