交换两个DIV元素？（一个预览，另一个占满整个页面） - 修改：交换DIV和IFRAME

Question

我有一个包含两个DIV元素的HTML页面。我想以这样的方式安排它们，使其中之一占据整个页面，另一个则显示在浏览器右上角作为一个小预览框。当用户单击预览时，该DIV的内容被交换到占据整个页面的DIV中。

这些DIV元素是谷歌小部件（带注释的时间线，运动图表等）。

编辑： 我正在使用wdm提供的方法来实现上述问题。问题现在是我有一个IFRAME，我想用一个DIV元素来替换它。我将IFRAME放入DIV标记中，如下所示。

  <div class="b small">
    <iframe src="http://somerandomsite.com" name="framename" id="frameid"> </iframe> 
  </div>

< p > iframe没有正确地调整大小。我认为这是因为CSS格式在iframe元素上没有正确地工作。

有什么想法可以调整iframe的大小，使其在单击时更改大小？

- jay

Answer 1

请查看演示并单击小框。基本上，我只是通过jQuery在两个

元素之间交换类。

演示：http://jsfiddle.net/wdm954/dRzaU/1/

编辑：带有图像的演示：http://jsfiddle.net/wdm954/dRzaU/4/

jQuery...

$('.small').live('click', function() {
    $('.big').addClass('small').removeClass('big');
    $(this).removeClass('small').addClass('big');
});

HTML...

<div id="wrap">
    <div class="a big"></div>
    <div class="b small"></div>
</div>

CSS（见演示）

- wdm

---

谢谢。拥有多个角度总是很好的。这有助于每个人学习！ - wdm

谢谢 wdm 和 Declan，我尝试了两种方法，使用示例 div 元素都很好用。（wdm的方法正是我要找的） - jay

Answer 2

您可以通过拥有四个 div 元素来实现 - 两个全尺寸的和两个缩略图。您的标记可能如下所示：

<div id="thumb1"> ... </div>
<div id="thumb2"> ... </div>
<div id="fullsize1"> ... </div>
<div id="fullsize2"> ... </div>

然后设置JavaScript监听器来在两者之间切换。如果您正在使用jQuery，它们可能看起来像这样。

$('#thumb1').click(function() {
    $(this).hide();
    $('#thumb2').show();
    $('#fullsize1').show();
    $('#fullsize2').hide();
});

$('#thumb2').click(function() {
    $('#thumb1').show();
    $(this).hide();
    $('#fullsize1').hide();
    $('#fullsize2').show();
});

- declan