交换两个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> 

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

任何想法如何，我可以调整的iframe，以便它在点击改变大小？

Answer 1

你可以通过让四个 divs - 两个全尺寸的和两个缩略图来实现。您的标记可能看起来是这样的：

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

Answer 2

请参阅演示，然后单击小方框。基本上我只是通过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（见演示）