单击链接切换显示两个div

Question

我的HTML中有两个div，一个将显示来自youtube的嵌入视频，另一个将显示contact-us输入表单。视频上方还有一个“与我们联系”链接。

最初在加载页面时会显示视频，但是当用户点击“联系我们”链接时，视频应该被隐藏，并且联系我们的输入表格应该显示在其位置。

我想用jQuery做这件事。

Answer 1

使用jQuery的toggle()或任何其他方法来显示和隐藏您的<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。