클릭 시 div를 다른 div로 대체하여 표시하기(jQuery)

예를 들어, 특정 요소의 div를 클릭했을 때 원래 div를 숨기고 다른 div를 표시해야 하는 경우가 있을 수 있습니다. 이 경우에 사용할 수 있는 jQuery 예제를 소개합니다. 원리는 처음 로드할 때에는 첫 번째 div를 표시하고, 두 번째 div를 숨겼다가, 두 번째 div를 클릭하면 첫 번째 div를 숨기고 두 번째 div를 표시하도록 합니다.

HTML 코드:

<div class="show1">
<span>첫 번째 DIV</span>
</div>
<div class="show2">
<span>두 번째 Div</span>
</div>

jQuery 코드:

$(document).ready(function() {
$('.show1').show(); //페이지를 로드할 때 표시할 요소
$('.show2').hide(); //페이지를 로드할 때 숨길 요소
$('.show1').click(function(){
$ ('.show1').hide(); //클릭 시 첫 번째 요소 숨김
$ ('.show2').show(); //클릭 시 두 번째 요소 표시
return false;
});
});

데모

참고로 워드프레스에서 이용하려면 워드프레스 테마의 함수 파일(functions.php)에 js 파일을 등록해야 합니다. 워드프레스에서 이 작업을 enqueue라고 합니다. enqueue에 대한 자세한 내용은 여기를 참고하시기 바랍니다.

 

참고:


2개 댓글

댓글 남기기

* 이메일 주소는 공개되지 않습니다.