2013-03-21 2 views
-1

내 HTML에 두 개의 div가 있습니다. 하나는 YouTube에서 삽입 된 비디오를 표시하고 다른 하나는 contact-us 입력 양식을 표시합니다. 동영상 위에 '문의하기'링크가 있습니다.링크 클릭시 두 div 표시 토글

처음에는 페이지가로드 될 때 비디오가 표시되지만 사용자가 "연락처"링크를 클릭하면 비디오가 숨겨지고 contact-us 입력 양식이 그 자리에 표시됩니다.

jQuery를 사용하여이 작업을 수행하고 싶습니다.

+3

안녕하세요. 도와 주시고, 먼저 자신을 시험해보십시오. 우리는 당신이 붙어있을 때 그것을 파악하는 것을 도울 수 있습니다. 이미 시도해 본 적이 있다면 몇 가지 코드를 게시하고 진행 과정과 발생한 오류 및 해결을 위해 수행 한 작업을 알려주십시오. – ahren

+0

가이드 : [무엇을 시도 했습니까?] (http://www.whathaveyoutried.com/) –

답변

3

<div>을 표시하거나 숨기려면 jQuery의 toggle() 또는 다른 방법을 사용하십시오.

<div class="container"> 
    <div class="video"> 
     <a href="#">Contact us</a><br /> 
     Video here 
    </div> 
    <div class="contact"> 
     <a href="#">Return to video</a><br /> 
     Contact form here 
    </div> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('a').click(function() { 
     $('.container > div').toggle(); 
    }); 
}); 
</script> 

이것은 단순한 예입니다

다음은 간단한 예제 (http://jsfiddle.net/8wbXV/)입니다. $('a') 링크의 선택자는 일반적으로 사용하는 것이 아니지만 여기서 설명하기 위해 사용합니다.

자세한 내용은 jQuery API을 참조하십시오.