[JQuery] 웹표준/웹접근성 탭 스크립트

아래소스는 제가 만든 간단한 스크립트입니다.

a 엘리먼트를 클릭하면 발생하는 이벤트이죠.

물론 CSS에서도 처리할 부분이 있지만.. 

이와 같은 방법으로 하면 클릭및 포커스를 개별적으로 관리할 수 있습니다.

또한 DOM을 독립적으로 관리할 수 있겠죠 ^^

완벽한 소스는 아니니. 참고만 하세염 ^^

<script>

$( ".wrap_body .inner .contents .wrap_hitEtc .tit  li > a " ).click(function() {

var forNum = $(".wrap_body .inner .contents .wrap_hitEtc .tit").find('li').length;

var clickNum = $(this).attr('id').replace(/[^0-9]/g,"");

mainDsplayCss(forNum, clickNum);

});

$( ".wrap_body .inner .contents .wrap_hitEtc .tit  li > a " ).focus(function() {

var forNum = $(".wrap_body .inner .contents .wrap_hitEtc .tit").find('li').length;

var clickNum = $(this).attr('id').replace(/[^0-9]/g,"");

mainDsplayCss(forNum, clickNum);

});

function mainDsplayCss(forNum, clickNum){

for(var i = 1; i <= forNum; i++){

if(i == clickNum){

if(i != 1){

$( ".wrap_body .inner .contents .wrap_hitEtc .tit li:first-child a").css("background","#fff");

$( ".wrap_body .inner .contents .wrap_hitEtc .tit li:first-child a").css("color","#000");

}

if(i == 1){

$( ".wrap_body .inner .contents .wrap_hitEtc .tit li:first-child a").css("background","#ff4800");

$( ".wrap_body .inner .contents .wrap_hitEtc .tit li:first-child a").css("color","#fff");

}

$( "#hitEtc_contents"+i ).css("display","block");

}else{

$( "#hitEtc_contents"+i ).css("display","none");

}

}

}

</script>