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

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

您可以为此使用 JS。据我了解，您想显示 <iframe>什么时候点击按钮？

首先，创建您的 <iframe> s 并设置它们的两个 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 的属性对应<iframe>的属性设置为 none或 block ，像这样:

<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>

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

<button onclick="
  const frame1 = document.querySelector('.iframes [name=frame1]'),
    frame2 = document.querySelector('.iframes [name=frame2]'),
    prev = frame1.style.display;
  frame1.style.display = prev === 'none' ? '' : 'none';
  frame2.style.display = prev === 'none' ? 'none' : '';
">
  Toggle
</button>

基本上，所有这些 JS 片段所做的都是反转 display目标的属性 <iframe> .你可以看到一个演示@http://jsfiddle.net/TheDragonRing/4bzrvnyh/