$(function(){ $('.tab_navi a').on('click',function(){ var idx = $(this).parent().index(); imgToggle($(this)); $('.tab_cont[data-cont=cont0'+ (idx+1) +']').show().siblings('.tab_cont').hide(); return false; }); function imgToggle(obj){ obj.parent().addClass('on').siblings().removeClass('on'); obj.find('img').attr('src',function(){ var src = $(this).attr('src'); return src.replace('off.jpg','on.jpg'); }).end().parent().siblings('li').find('img').attr('src',function(){ var src = $(this).attr('src'); return src.replace('on.jpg','off.jpg'); }); } });
<ul class="tab_navi"> <li><a href="javascript:;"><img src="img_tab01_on.jpg" alt="" /></a></li> <li><a href="javascript:;"><img src="img_tab02_off.jpg" alt="" /></a></li> </ul> <div class="tab_cont" data-cont="cont01"></div> <div class="tab_cont" data-cont="cont02" style="display:none"></div>
'퍼블리싱 > jQeury, Javascript' 카테고리의 다른 글
막대그래프(unlimited value) (0) | 2017.01.19 |
---|---|
빈칸넣기 문제(input setting), how to get byte (0) | 2016.12.20 |
iframe에서 부모창 document에 접근하기 (0) | 2016.06.24 |
웹접근성 키보드이동가능한 디자인 셀렉트박스 플러그인 (0) | 2016.03.24 |
Document.readyState (0) | 2016.02.12 |