Jquery переключения и шоу - PullRequest
Новая
       10

Jquery переключения и шоу

0 голосов
/ 15 ноября 2010

В приведенном ниже коде, по ссылке «Подробности», 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>

Ответы [ 3 ]

1 голос
/ 15 ноября 2010

Используйте функцию toggle () jQuery: 

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

Для чего вам нужен iframe?Вы можете установить iframe вокруг элемента div и использовать переключатель элемента iframe.

1 голос
/ 15 ноября 2010

Согласитесь с Юстусом, вам обычно не нужен 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, используйте подход Justus к его идентификатору.

0 голосов
/ 15 ноября 2010 
function toggle(div)
{
    var element = $('iframe').contents().find('#'+div);

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