Jquery 切换和显示

Question

在下面的代码中，单击详细信息链接时，div 应显示在带有滚动条的 iframe 中，然后再次单击该链接 iframe 和 div 不应显示。如何执行此操作

 <script>
  function toggle(div)
  {

  }
 </script>


<a href="#" onclick=toggle("div0");>Details </a><Name: Sal
<div id="div0" style="display:none">
<table>
<tr><th>Date</th><th>Link</th></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
</table>
</div>
<a href="#" onclick=toggle("div1");>Details </a><Name: Tom
<div id="div1" >
<table>
<tr><th>Date</th><th>Link</th></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
</table>
</div>

Answer 1

使用jQuery的toggle()函数：

function toggle(element){     
  $('#' + element).toggle();     
});

你需要 iframe 做什么？您可以在 div 周围设置 iframe，并使用 iframe 元素上的切换。

Answer 2

同意贾斯图斯， 您通常不需要 iFrame，切换功能可以优雅地完成工作。 如果你仍然喜欢使用 iFrame，你可以这样设置它的内容：

$('#myframe').contents()[0].body.innerHTML = $('#mydiv').html();

到如下所示的 HTML：

<iframe name="framename" id="myframe"></iframe>
<div id="mydiv" style="display:none">
<table>
<tr><th>Date</th><th>Link</th></tr>
<tr><td>2010-04-20 10:26:01</td></td></tr>
<tr><td>2010-04-20 10:26:01</td></td></tr>
<tr><td>2010-04-20 10:26:01</td></td></tr>
<tr><td>2010-04-20 10:26:01</td></td></tr>
<tr><td>2010-04-20 10:26:01</td></td></tr>
<tr><td>2010-04-20 10:26:01</td></td></tr>
<tr><td>2010-04-20 10:26:01</td></td></tr>
<tr><td>2010-04-20 10:26:01</td></td></tr>
</table>
</div>

如果您想切换 iFrame 本身，请在 iFrame 的 id 上使用 Justus 的方法。

Answer 3

function toggle(div)
{
    var element = $('iframe').contents().find('#'+div);

    if( $(element).is(":visible") == false)
       $(element).show();
    else
       $(element).hide();
}