时间戳

首页 > 解决方案 > 使用按钮显示和隐藏带有 iframe 的特定 div

html - 使用按钮显示和隐藏带有 iframe 的特定 div

问题描述

我只是想为家人做网站。我已经完成了带有 css 的基本 html，但是有一个问题。我需要实现页面更改 iframe，它链接到 php 中的两种表单。现在我已经找到了更改 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>

标签： htmlcssiframe

解决方案

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

#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;
}
<!-- Reveal with active button -->
<button id="btn1">Reveal Frame 1</button>
<button id="btn2">Reveal Frame 2</button>
<br>
<!-- Reveal with checked radio -->
<input type="radio" id="rd1" name="reveal">
<label for="rd1">Reveal Frame 1</label>
<input type="radio" id="rd2" name="reveal">
<label for="rd2">Reveal Frame 2</label>
<br>
<!-- Reveal with checked checkbox -->
<input type="checkbox" id="cb1">
<label for="cb1">Reveal Frame 1</label>
<input type="checkbox" id="cb2">
<label for="cb2">Reveal Frame 2</label>

<div>
<iframe width="100px" id="if1" src="http://google.com">Test</iframe>
<iframe width="200px" id="if2" src="http://amazon.com">Test</iframe>
</div>

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

希望能帮助到你

推荐阅读