마우스 이벤트 제이쿼리
본문
이미지가 6개정도있는데
클릭하면 바뀌게할라고하는데여 바뀌긴합니다. 근대 hide로 두번클릭해야 사라집니다 그리고 처음에 이미지가 6개다있으니깐 보기싫어서여. 처음부터 하나만있고 클릭할때마다 바뀌고싶네여
<script>
$(document).ready(function(){ //DOM이 준비되고
$('#toggleButton').click(function(){ // ID가 toggleButton인 요소를 클릭하면
var state = $('#moreMenu').css('display'); // state 변수에 ID가 moreMenu인 요소의 display의 속성을 '대입'
if(state == 'none'){ // state가 none 상태일경우
$('#moreMenu').show(); // ID가 moreMenu인 요소를 show();
}else{ // 그 외에는
$('#moreMenu1').hide(); // ID가 moreMenu인 요소를 hide();
}
});
});
</script>
<script>
$(document).ready(function(){ //DOM이 준비되고
$('#toggleButton1').click(function(){ // ID가 toggleButton인 요소를 클릭하면
var state = $('#moreMenu1').css('display'); // state 변수에 ID가 moreMenu인 요소의 display의 속성을 '대입'
if(state == 'none'){ // state가 none 상태일경우
$('#moreMenu1').show(); // ID가 moreMenu인 요소를 show();
}else{ // 그 외에는
$('#moreMenu').hide(); // ID가 moreMenu인 요소를 hide();
}else{
$('#moreMenu1').hide(); // ID가 moreMenu인 요소를 hide();
}
});
});
</script>
<script>
$(document).ready(function(){ //DOM이 준비되고
$('#toggleButton2').click(function(){ // ID가 toggleButton인 요소를 클릭하면
var state = $('#moreMenu2').css('display'); // state 변수에 ID가 moreMenu인 요소의 display의 속성을 '대입'
if(state == 'none'){ // state가 none 상태일경우
$('#moreMenu2').show(); // ID가 moreMenu인 요소를 show();
}else{ // 그 외에는
$('#moreMenu1').hide(); // ID가 moreMenu인 요소를 hide();
}
});
});
</script>
<img src="/img/main/main_01.jpg" style="width: 550px;height: 350px">
<img src="/img/main/icon3.png" style="margin-top: -685px; margin-left: 620px;" />
<div id="toggleButton" style="margin-top: 20px">
<img src="/img/main/on_1.png" style="margin-top: -640px;margin-left: 560px"/>
</div>
<div id="toggleButton1">
<img src="/img/main/on_2.png" style="margin-top: -640px; " />
</div>
<div id="toggleButton2">
<img src="/img/main/on_3.png" style="margin-top: -500px;margin-left: -175px"/>
<img src="/img/main/on_4.png" style="margin-top: -500px" />
<img src="/img/main/on_5.png" style="margin-left: -175px; margin-top: -360px"/>
<img src="/img/main/on_6.png" style="margin-top: -360px"/>
</div>
<div id="moreMenu">
<img src="/img/main/show_1.png" />
</div>
<div id="moreMenu1">
<img src="/img/main/show_2.png" />
</div>
<div id="moreMenu2">
<img src="/img/main/show_3.png" />
</div>