交换两个DIV元素？（预览，而另一张占整个页面）-编辑：交换DIV和IFRAME

| 我有一个包含两个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的大小，以便更改点击大小？

已邀请:

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（请参阅演示）

锑寝粒

您可以通过具有四个div来实现此目的-两个全尺寸的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();
});

要回复问题请先登录或注册

交换两个DIV元素？（预览，而另一张占整个页面）-编辑：交换DIV和IFRAME

2 个回复

发起人

iframe

swap

javascript

html

问题状态

交换两个DIV元素？ （预览，而另一张占整个页面）-编辑：交换DIV和IFRAME

与内容相关的链接

2 个回复

发起人

iframe

swap

javascript

html

问题状态

交换两个DIV元素？（预览，而另一张占整个页面）-编辑：交换DIV和IFRAME