[JQuery] 웹표준/웹접근성 탭 스크립트 정보
오픈소스 [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>
0