클릭시 배경이미지 반복 변경 하는법좀 알려주세요 ㅠㅠ 채택완료
배꾸이
8년 전
조회 5,496
</p><p><script src="<?php echo G5_JS_URL ?>/jquery-1.8.3.min.js"></script></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><script></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$(document).ready(function(){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$('#tg_Btn').click(function(){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$('#tg_sitemap').fadeToggle(); //버튼클릭시 나타나고 사라지고</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></script></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><script></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$(document).ready(function(){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$('#tg_Btn').click(function(){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$('#tg_Btn').css({"background":"url(../img/toggle_click.png)", 'background-repeat' : 'no-repeat', 'background-position':'center center'}); </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></script></p><p>
이렇게 까지 해서 클릭했을때 배경이미지가 바뀌게는 했는데 다시 변경했을때 원래 이미지로 돌아오는 법을 모르겠습니다.. 부탁드리겠습니다 ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
8년 전
jquery 에 toggleClass라는 메소드가 있습니다 그걸 활용해보시면 어떨까요
http://api.jquery.com/toggleclass/">http://api.jquery.com/toggleclass/
</p><p><!doctype html></p><p><html lang="en"></p><p><head></p><p> <meta charset="utf-8"></p><p> <title>toggleClass demo</title></p><p> <style></p><p> p {</p><p> margin: 4px;</p><p> font-size: 16px;</p><p> font-weight: bolder;</p><p> cursor: pointer;</p><p> }</p><p> .blue {</p><p> color: blue;</p><p> }</p><p> .highlight {</p><p> background: yellow;</p><p> }</p><p> </style></p><p> <script src="<a href="<a href="https://code.jquery.com/jquery-1.10.2.js" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-1.10.2.js</a>"><a href="https://code.jquery.com/jquery-1.10.2.js" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-1.10.2.js</a></a>"></script></p><p></head></p><p><body></p><p> </p><p><p class="blue">Click to toggle</p></p><p><p class="blue highlight">highlight</p></p><p><p class="blue">on these</p></p><p><p class="blue">paragraphs</p></p><p> </p><p><script></p><p>$( "p" ).click(function() {</p><p> $( this ).toggleClass( "highlight" );</p><p>});</p><p></script></p><p> </p><p></body></p><p></html><span style="font-size: 11pt;"> </span></p><p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
배꾸이
8년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
<button type="button" id="tg_Btn" style="width:21px; height:14px; background-image:url('../img/toggle.png'); border:0; background-color:white; margin:22px 0 0 20px;"></button>
<button type="button" class="tg_Btn2" style="width:21px; height:14px; background-image:url('../img/toggle_click.png'); border:0; background-color:white; margin:22px 0 0 20px; display:none;"></button>
---------------------------------------------------------------
<script>
$(document).ready(function(){
$('#tg_Btn').click(function(){
$('#tg_sitemap').fadeToggle(); //버튼클릭시 나타나고 사라지고
});
});
</script>
<script>
$(document).ready(function(){
$(this).toggleClass("tg_btn2");
});
</script>
[/code]
이렇게 했는데 잘 안되네요... 뭘 잘못한걸까요?