클릭시 배경이미지 반복 변경 하는법좀 알려주세요 ㅠㅠ
본문
<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
jquery 에 toggleClass라는 메소드가 있습니다 그걸 활용해보시면 어떨까요
http://api.jquery.com/toggleclass/
<!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>
<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>
이렇게 했는데 잘 안되네요... 뭘 잘못한걸까요?
답변을 작성하시기 전에 로그인 해주세요.
