交換兩個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（見演示）