Tab 버튼을 선택했을 때, 버튼들 이미지 변경하는 것 관련해서 질문드립니다.

Tab 버튼을 선택했을 때, 버튼들 이미지 변경하는 것 관련해서 질문드립니다.

QA

Tab 버튼을 선택했을 때, 버튼들 이미지 변경하는 것 관련해서 질문드립니다.

본문

<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
$('.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
$('.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까지 기능을 같이 구현하려고 하면 어떻게 수정을 하는게 맞을까요?

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

다른 분들의 조언 부탁드립니다.


$(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');
		}
	});
	//탭 버튼 하나에 대한 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"));
		
	});
});


이 질문에 댓글 쓰기 :

답변 2

each 저건 클릭할때 마다 모든 이미지를 변경하게 되는데 좋은 방법이 아닙니다
작동만 되면 되는 것이 아니라 이미지 변경을 최소화 시켜야죠
//탭 버튼 하나에 대한 on, off , //탭 변경에 대한 on, off 싹 지우고 아래처럼 해보세요 
 
var prev=999;
$('.visual_tab ul li').click(function(){ 
    idx = $(this).index('.visual_tab ul li');
    img_src= $(this).find('img').attr("src")
     if(img_src.indexOf('_off')>-1 ) img_src= img_src.replace('_off','_on');
     else img_src= img_src.replace('_on','_off');
     $(this).find('img').attr('src', img_src);

 if(prev !=999){
     img_prev= $('.visual_tab ul li').eq(prev).find('img').attr('src');
    if(img_prev.indexOf('_on')>-1 ){
     img_prev=img_prev.replace('_on','_off');
     $('.btnk').eq(prev).children('img').attr('src', img_prev);
    }
  }
    prev=idx;
});

탭 버튼 하나에 대한 on, off가 무슨 의미인지 모르겠어요...

답변을 작성하시기 전에 로그인 해주세요.
전체 36
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT