테스트 사이트 - 개발 중인 베타 버전입니다

Tab 버튼을 선택했을 때,선택한 버튼 이미지 관련해서 질문드립니다. 채택완료

탭 페이지에서 1번 탭의 버튼을 누르면 버튼1의 이미지를, 나머지 탭의 버튼들의 이미지는 버튼2로, 2번 탭의 버튼을 누르면 2번 탭의 버튼이 버튼1의 이미지를, 나머지 탭 버튼의 이미지는 버튼1로 하는 작업을 하려고 합니다.
$('.visual_tab > ul > li > img').each(function(idx) {

	var aSrc = $(this).attr('src').replace('_on.png', '_off.png');

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

		$(this).click(function() {

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

			if(sSrc.indexOf('_on')>-1){

				$(this).prop('src',sSrc.replace('_on','_off'))				

			} 

			else{ 

				$(this).prop('src',sSrc.replace('_off','_on')) 

			} 

		});

	});
위와 같이, 단일 탭 버튼에 관해 처리하는 방법은 알겠는데 나머지 탭들에 관해 처리하는 방법은 알 길이 없어서 이렇게 글을 올리게 되었습니다. 다른 분들의 조언 부탁드립니다.
$(document).ready(function() {
    
    /************************
    @ visual tab 마우스 이벤트 등록
    ************************/
    $('.visual_tab ul > li').bind('click mouseenter mouseleave',function(event){
        if(event.type == 'mouseenter'){
            //마우스 오버
            visualOver($(this));

        }else if(event.type == 'mouseleave'){
            //마우스 아웃
            visualOut($(this));
        }else{
            //마우스 클릭
            if(_cur != $(this).index()){
                _prev = _cur;
                _cur = $(this).index();
                visual_change($(this).index());
            }
        }
    });

    /************************
    @ visual 초기화
    ************************/
    visual_len = $('.visual_obj_group > div').length;
    visual_init();
    visualTimer = setInterval(autoTimer,_time);

    $('.visual_content').bind('mouseenter mouseleave',function(event){
        if(event.type == 'mouseenter'){
            clearInterval(visualTimer)    
//            console.log('enter');
        }else{
            visualTimer = setInterval(autoTimer,_time);            
//            console.log('leave');
        }
    });

    $('.visual_tab > ul > li > img').each(function(idx) {
    var aSrc = $(this).attr('src').replace('_on.png', '_off.png');
    $(this).attr('src', aSrc);
        $(this).click(function() {
        var sSrc = $(this).attr('src'); 
/*             alert($(this).attr('src')); */
/*             var sSrc = $(this).attr('src').replace('_off.png', '_on.png'); */
/*             $(this).attr('src', sSrc); */
            if(sSrc.indexOf('_on')>-1){
                $(this).prop('src',sSrc.replace('_on','_off'))                
            } 
            else{ 
                $(this).prop('src',sSrc.replace('_off','_on')) 
            } 
        });
    });
});
댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
$('.visual_tab ul li').click(function(){
$('.visual_tab ul li > img').each(function(){
$(this).attr("src",$(this).attr("src").replace("on","off"));
});
$(this).find('img').attr("src",$(this).find('img').attr("src").replace("off","on"));
이렇게 하심 되지 않을까요?
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

<div class="visual_tab">
<ul>
<li><img src="../images/main/m_visual_btn_01_off.png" class="png active" alt="듀어토닝"/></li>
<li><img src="../images/main/m_visual_btn_02_off.png" class="png" alt="여드름"/></li>
<li><img src="../images/main/m_visual_btn_03_off.png" class="png" alt="안티에이징"/></li>
<li><img src="../images/main/m_visual_btn_04_off.png" class="png" alt="점/검버섯"/></li>
<li><img src="../images/main/m_visual_btn_05_off.png" class="png" alt="힐링케어"/></li>
</ul>
</div>

만약에 이렇게 구성된 페이지에서

각각 탭에 대한 선택시 on / off까지 기능을 같이 구현하려고 하면 어떻게 수정을 하는게 맞을까요?

//탭 버튼 하나에 대한 on, off
$('.visual_tab > ul > li > img').each(function(idx) {
var aSrc = $(this).attr('src').replace('_on.png', '_off.png');
$(this).attr('src', aSrc);
$(this).click(function() {
var sSrc = $(this).attr('src');
if(sSrc.indexOf('_on')>-1){
$(this).prop('src',sSrc.replace('_on','_off'))
}
else{
$(this).prop('src',sSrc.replace('_off','_on'))
}
});
});

//탭 변경에 대한 on, off
$('.visual_tab ul li').click(function(idx){
$('.visual_tab ul li > img').each(function(){
$(this).attr("src",$(this).attr("src").replace("on","off"));
});
$(this).find('img').attr("src",$(this).find('img').attr("src").replace("off","on"));

});

이렇게 코딩을 하는데, 탭 버튼 하나에 대한 on, off까지 동시에 먹이려고 하니 쉽지 않네요..ㅎㅎ

댓글을 작성하려면 로그인이 필요합니다.

많은 도움이 되었습니다. 감사합니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

아...제가 잘못이해한듯...
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

전체 질문 목록

🐛 버그신고