Jquery 切换和显示

Posted 2023-05-09

【中文标题】Jquery 切换和显示

【英文标题】：Jquery toggle and show

【发布时间】：2011-05-10 01:58:40

【问题描述】：

在下面的代码中，单击详细信息链接时，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>

【参考方案1】：

使用jQuery的toggle()函数：

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

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

【参考方案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 的方法。

【讨论】：

当 Rajeev 想要使用 iframe 时，这是一个很好的附加解决方案。我没有时间解释如何做到这一点，我很高兴你做到了！

【参考方案3】：

function toggle(div)

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

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

【讨论】：

我想要相同的特征并且这个 div 必须在 iframe 中