如何在单击按钮之前隐藏iframe？ [英] How to hide an iframe until a button is clicked?

问题描述

我有一个内容区域，我希望在首次加载页面或点击传记按钮时显示一些文本。当单击其他按钮（AFT）时，我想通过内容区域中的iframe显示URL的内容。我是新编码所以不太确定如何实现这个。



目前我的代码出现了文本，但iframe出现在此下面，但我想要iframe单击按钮时替换文本。函数toShow（）应该这样做，但我不知道从哪里开始。任何帮助表示赞赏！



我的尝试：



HTML代码：

I have a content area in which I would like to display some text when the page first loads or when the 'biography' button is clicked. When a different button is clicked (AFT) I would like to display the content of a URL via an iframe in the content area. I'm new to coding so not really sure how to achieve this.

With my code currently the text appears but the iframe appears underneath this, but I want the iframe to replace the text when the button is clicked. The function toShow() should do this but I don't know where to start. Any help is appreciated!

What I have tried:

HTML code:

<div id="content" > 
    <script src="myJS.js"></script>
    <script> displayBiography(); </script>

    <iframe src="cwExample.pdf" name="iframe1" id="pdf"></iframe>
    </div>

    <div id="leftBar"> 
    <br><br>
    <button class="button" onclick="displayBiography();"> Biography 
    </button>
    <h3> Samples of Work </h3>
    <button class="button" onclick="toShow();" target="iframe1"> AFT 
    </button>
    </div>

JS代码：

JS code:

var content = document.getElementById("content");
    var biography = "<p> Text here </p> "  
    ;

    function displayBiography() {
        "use strict";
        content.innerHTML = biography;
        var iframe = document.getElementById('pdf');
        iframe.style.display = 'none';
    }

    function toShow() {
    }

推荐答案

试试这个

Try this

function toShow() {
  var iframe = document.getElementById('pdf');
  iframe.style.display = 'block';
}

这篇关于如何在单击按钮之前隐藏iframe？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！