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 포인트
커네드커네드
11년 전
$('.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개
b
bismute
11년 전
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
채택
답변대기
답변대기
답변대기
답변대기
채택
채택
답변대기
답변대기
답변대기
채택
<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까지 동시에 먹이려고 하니 쉽지 않네요..ㅎㅎ