Javascript 显示/隐藏而不重新加载

我有两个嵌入我显示。嵌入有一个指向pdf的链接：

<div id="container" class="text-center">           
    <embed src="www.example.com/pdf1.pdf" width="550" height="800" type='application/pdf' id="mypdf1">
    <embed src="www.example.com/pdf2.pdf" width="550" height="800" type='application/pdf' id="mypdf2">
</div>

我还有两个按钮，一个显示嵌入，另一个隐藏嵌入。像这样：

<div class="button">
    <button class="btn-info" onclick="hide('thePdf2')" type="button">HIDE</button>
</div>
<div class="button">
    <button class="btn-info" onclick="show('thePdf2')" type="button">SHOW</button>
</div>

隐藏
显示

我使用以下函数来显示和隐藏嵌入：

<script> 
    function show(target) {
        document.getElementById(target).style.display = 'block';
    }
    function hide(target) {
        document.getElementById(target).style.display = 'none';
    }
</script>

功能表演（目标）{
document.getElementById（target.style.display='block'；
}
函数隐藏（目标）{
document.getElementById（target.style.display='none'；
}

---

我只显示和隐藏其中一个嵌入，我的问题是：每次显示嵌入时，它都会重新加载pdf并转到pdf页面的顶部。我不想每次显示pdf时都重新加载它。如何实现这一点？

不是在我的浏览器（Chrome）中重新加载PDF，因此我无法复制，而是使用.visibility而不是.display可能在您的浏览器中工作

<script> 
    function show(target) {
        document.getElementById(target).style.visibility = 'visible';
    }
    function hide(target) {
        document.getElementById(target).style.visibility = 'hidden';
    }
</script>

功能表演（目标）{
document.getElementById（target.style.visibility='visible'；
}
函数隐藏（目标）{
document.getElementById（target.style.visibility='hidden'；
}

您还可以使用.show（）/.hide（）Jquery函数。工作的砰砰声。仅供参考，还添加了将选定PDF加载到单个

的演示

/* toggle show hide of pdf */
$(document).on('click', '.pdf-container button', function(event){
    var $target = $(event.target);
    var $pdfViewer = $target.closest('.pdf-container').find('embed');

    if(!$pdfViewer){ return; }
    if($pdfViewer.is(':visible')){
        $pdfViewer.hide();
        $target.text('show');
        return;
    } 

    $pdfViewer.show();
    $target.text('hide');
});