Question

我只是想为家人提供网站。我已经用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>

Answer 1

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

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

希望有帮助

Answer 2

您可以使用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/上观看演示

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

2 个答案: