使用按钮在iframe中显示和隐藏特定的div

时间:2018-07-17 07:23:35

标签: html css iframe

我只是想为家人提供网站。我已经用CSS完成了基本的html,但是有一个问题。我需要实现链接到php中两种形式的页面更改iframe。现在,我已经找到了更改href的代码,但是这些iframe具有不同的高度,因此我想将它们都关闭到div中,并使用按钮显示第一或第二个。

这是到目前为止的代码:

    <section id="predplatne" class="clearfix">
  <div class="predplatne_in">
    <h2>Text</h2>
    <div class="vyber">
      <button class="button"><a href="http://www.php" target="frame">1</a></button>
      <button class="button"><a href="http://www.php2" target="frame">2</a></button>
    </div>
  <div class="box">
    <div class="in">
      <iframe allowfullscreen frameborder="0" height="1700" id="frame" name="frame" src="http://www.php" width="480"></iframe> <a href="http://www.php" target="frame"></a> <a href="http://www.php2" target="frame"></a>
    </div>
  </div>
</div>
  </div>   

2 个答案:

答案 0 :(得分:0)

您可以通过以下一些方法来实现

Composer
#if1, #if2{
  display:none;
}

#btn1:active ~ div #if1, #btn2:active ~ div #if2{
  display:block;
}

#rd1:checked ~ div #if1, #rd2:checked ~ div #if2{
  display:block;
}

#cb1:checked ~ div #if1, #cb2:checked ~ div #if2{
  display:block;
}

最简单的方法是使用javascript,而不仅仅是html和css

希望有帮助

答案 1 :(得分:0)

您可以使用JS。据我了解,您想在单击按钮时显示<iframe>吗?

首先,创建您的<iframe>,并将它们的两个CSS display值都设置为none,如下所示:

<div class="iframes">
  <iframe allowfullscreen style="display: none" frameborder="0" height="300" width="480" name="frame1" src="http://example.com"></iframe>
  <iframe allowfullscreen style="display: none" frameborder="0" height="300" width="240" name="frame2" src="http://thedragonring.me"></iframe>
</div>

然后,在其<button>属性中添加一些带有小脚本的onclick,这将切换是否将相应display的{​​{1}}属性设置为{{1 }}或<iframe>,如下所示:

none

或者,您可以添加一个按钮来在2个iframe之间切换:

block

基本上,JS的所有这些摘要都与目标<div class="buttons"> <button onclick=" const el = document.querySelector('.iframes [name=frame1]'); el.style.display = el.style.display === 'none' ? '' : 'none'; "> Frame 1 (example.com) </button> <button onclick=" const el = document.querySelector('.iframes [name=frame2]'); el.style.display = el.style.display === 'none' ? '' : 'none'; "> Frame 2 (thedragonring.me) </button> </div> 的{​​{1}}属性相反。您可以在http://jsfiddle.net/TheDragonRing/4bzrvnyh/上观看演示