Copy
<script src="<?php echo G5_JS_URL ?>/jquery-1.8.3.min.js"></script> <script> $(document).ready(function(){ $('#tg_Btn').click(function(){ $('#tg_sitemap').fadeToggle(); //버튼클릭시 나타나고 사라지고 }); }); </script> <script> $(document).ready(function(){ $('#tg_Btn').click(function(){ $('#tg_Btn').css({"background":"url(../img/toggle_click.png)", 'background-repeat' : 'no-repeat', 'background-position':'center center'}); }); }); </script>이렇게 까지 해서 클릭했을때 배경이미지가 바뀌게는 했는데 다시 변경했을때 원래 이미지로 돌아오는 법을 모르겠습니다.. 부탁드리겠습니다 ㅠㅠ
|
답변 1개 / 댓글 1개
채택된 답변
+20 포인트
SLOOPjquery 에 toggleClass라는 메소드가 있습니다 그걸 활용해보시면 어떨까요
http://api.jquery.com/toggleclass/
Copy
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>toggleClass demo</title> <style> p { margin: 4px; font-size: 16px; font-weight: bolder; cursor: pointer; } .blue { color: blue; } .highlight { background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body> <p class="blue">Click to toggle</p><p class="blue highlight">highlight</p><p class="blue">on these</p><p class="blue">paragraphs</p> <script>$( "p" ).click(function() { $( this ).toggleClass( "highlight" );});</script> </body></html>답변에 대한 댓글 1개
2016-11-30 (수) 14:28:52
답변을 작성하려면 로그인이 필요합니다.
<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]
이렇게 했는데 잘 안되네요... 뭘 잘못한걸까요?