jquery - リンクのクリック時に 2 つの div の表示を切り替えます

Question

HTML には 2 つの div があり、1 つは YouTube からの埋め込みビデオを表示し、もう 1 つはお問い合わせ入力フォームを表示します。動画の上に「お問い合わせ」リンクもあります。

最初にページが読み込まれるとビデオが表示されますが、ユーザーが「お問い合わせ」リンクをクリックすると、ビデオが非表示になり、その場所に連絡先入力フォームが表示されます。

jQueryを使用してこれを行いたいと思います。

Answer 1

を表示および非表示にするには、 jQuerytoggle()またはその他の方法を使用します<div>。

簡単な例を次に示します ( http://jsfiddle.net/8wbXV/ ):

<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>

これは簡単な例です。リンクのセレクター$('a')は通常使用するものではありませんが、ここでは説明のために使用しています。

詳細については、jQuery APIを参照してください。