[jQuery] 탭버튼 활성화와 Div 활성화

Description

anchorBtn    :    탭버튼     ex) <img src="aaa/bbb/img_off.png" alt="" class="anchorBtn"/>

dataDiv        :    활성화 대상을 감싸는 div     ex)   <div class="dataDiv">

<div>대상1</div>

<div>대상2</div>

<div>대상3</div>

</div>

Constraint

1. 탭버튼의 순서와 활성화 대상의 순서가 같아야한다.

2. 이미지 hover시 변경될 이미지의 src가 변경이 용이해야한다.

ex) 아래 예제에서는 img_on.png, img_off.png 이기에 replace로 변경이 용이했다.

$(function() {

$('.anchorBtn').click(function(){

var target_index = $('.anchorBtn').index(this);

$('.anchorBtn').each(function(index, element){

var thisSrc = $(this).attr('src');

var onSrc = thisSrc.replace('_off','_on');

var offSrc = thisSrc.replace('_on','_off');

if(target_index == index){

$(this).attr('src',onSrc);

$('.dataDiv div').eq(index).css('display','block');

}else{

$(this).attr('src',offSrc);

$('.dataDiv div').eq(index).css('display','none');

}

});

});

$(".anchorBtn").mouseover(function(){

var tab_idx = $(".anchorBtn").index(this);

var thisSrc = $(this).attr('src');

var onSrc = thisSrc.replace('_off','_on');

var offSrc = thisSrc.replace('_on','_off');

if($(".dataDiv div").eq(tab_idx).css("display") == "none"){

$(this).attr("src",onSrc);

}

});

$(".anchorBtn").mouseout(function(){

var tab_idx = $(".anchorBtn").index(this);

var thisSrc = $(this).attr('src');

var onSrc = thisSrc.replace('_off','_on');

var offSrc = thisSrc.replace('_on','_off');

if($(".dataDiv div").eq(tab_idx).css("display") == "none"){

$(this).attr("src",offSrc);

}

});

});