예를 들어, 특정 요소의 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에 대한 자세한 내용은 여기를 참고하시기 바랍니다.
감사합니당~~~~~~
안녕하세요, 박인효님.
블로그를 방문해주셔서 감사합니다. 즐거운 휴일 보내시기 바랍니다 :)