메뉴 이미지를 클릭시 이미지가 바뀌면서 상세이미지가 뜨는 소스입니다
그런데 제이쿼리를 적용하니 menu_01_off.jpg 를 클릭시 menu_01_on.jpg 으로 바뀌는것 까진 되는데
왜!! 상세가 뜨는곳에 menu_01_on.jpg 이 뜨는지 ㅠㅠ
해결방법같은게 없을까요..?
<style>
ul{list-style:none; margin:0; padding:0;}
#cont{ display:none;}
</style>
<div id="btn">
<ul class="btnclick">
<li>
<div class="btn1">
<img class="on1" src="/menu_01_off.jpg">
</div>
<div class="cont1" id="cont">
<img src="/a.jpg">
</div>
</li>
<li>
<div class="btn2">
<img class="on2" src="/menu_02_off.jpg">
</div>
<div class="cont2" id="cont">
<img src="/b.jpg">
</div>
</li>
<li>
<div class="btn3">
<img class="on3" src="/menu_03_off.jpg">
</div>
<div class="cont3" id="cont">
<img src="/c.jpg">
</div>
</li>
<li>
<div class="btn4">
<img class="on4" src="/menu_04_off.jpg">
</div>
<div class="cont4" id="cont">
<img src="/d.jpg">
</div>
</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function(){
$('.btnclick li').click(function(){
var tabType = $(this).index();
$('.btnclick li').each(function(index){
$(this).find('img').attr('src', $(this).find('img').attr('src').replace('_off.jpg','_on.jpg'));
if(tabType != index){
$(this).find('img').attr('src', $(this).find('img').attr('src').replace('_on.jpg','_off.jpg'));
}
});
});
});
$( ".on1" ).click(function() {
$( ".cont1" ).slideToggle(300);
$( ".cont2" ).hide();
$( ".cont3" ).hide();
$( ".cont4" ).hide();
});
$( ".on2" ).click(function() {
$( ".cont2" ).slideToggle(300);
$( ".cont1" ).hide();
$( ".cont3" ).hide();
$( ".cont4" ).hide();
});
$( ".on3" ).click(function() {
$( ".cont3" ).slideToggle(300);
$( ".cont1" ).hide();
$( ".cont2" ).hide();
$( ".cont4" ).hide();
});
$( ".on4" ).click(function() {
$( ".cont4" ).slideToggle(300);
$( ".cont1" ).hide();
$( ".cont2" ).hide();
$( ".cont3" ).hide();
});
</script>
답변 1개 / 댓글 1개
채택된 답변
+20 포인트
DMano이해하기 어렵습니다.
사이트주소나 이미지를 포함해서 질문하시면 좋을 것 같습니다.
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.