본문 바로가기

퍼블리싱/jQeury, Javascript

탭메뉴, tabmenu, img src replace

$(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>