交换两个DIV元素？ （预览一个而其他占据整页） - EDITED：交换DIV和IFRAME

Question

我有一个包含两个DIV元素的HTML页面。我想以这样的方式安排这两个，使得其中一个占据整个页面，另一个显示为浏览器右上方的小预览框。当用户点击预览时，该DIV的内容将与占用该页面的DIV交换。

div元素是google小部件。 （带注释的时间表，动态图表等）。

编辑： 我使用wdm提供的方法来实现上述问题。现在的问题是我有一个IFRAME，我想与DIV元素交换。我将IFRAME放在DIV标签内，如下所示

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

iframe未正确调整大小。我假设它是因为CSS格式化不能正确处理iframe元素。

任何想法如何调整iframe的大小以便在点击时改变大小？

Answer 1

请参阅演示并单击小方框。基本上我只是通过jQuery在两个div元素之间交换类。

演示：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（见演示）

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();
});