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

同意Justus，您通常不需要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();
}

Jquery切换和显示

3 个答案: