切换包含另一个 html 页面的 div

Question

一直试图制作一个按钮，打开一个包含另一个 html 页面的 div。 我让按钮工作，但主页面打开时已经显示了 div，我需要隐藏它。 在搞砸了这一切之后，我被困在了这个问题上。 按钮不起作用。

html

<p>Press the button</p>
<button id="button1" onClick="show()">Show / Hide</button>
<div id="Ahover">
    <object type="text/html" data="http://validator.w3.org/"></object>
</div>

css

#Ahover {
    display:none;
    overflow: hidden;
    border:1px ridge blue;
}
object {
    width:760px;
    height:600px;
}

js

$('#button1').click(function(){
   $('#Ahover').toggle() 
});

小提琴

任何帮助，我做错了什么？ 这甚至可能吗。

谢谢，通过将脚本移动到标签中，最终使其工作。

Answer 1

试试这个代码：

HTML：

<p>Press the button</p><button id="button1">Show / Hide</button>
<div id="Ahover"> 
<object type="text/html" data="http://validator.w3.org/" >
</object></div>

CSS：

#Ahover {
display:none;
overflow: hidden;
border:1px ridge blue;
}
object {
width:760px;
height:600px; 
display:inline-block
}

JS：

$('#button1').on('click',function(e){
 $('#Ahover').toggle();
});

演示在这里：

https://jsfiddle.net/Dee0565/aaqfykz3/2/

Answer 2

在此处查看工作演示 - http://jsfiddle.net/x2qjdfwk/唯一的更改是从按钮中删除 show() 函数，因为您已经对其应用了 jQuery 单击事件。

<p>Press the button</p><button id="button1">Show / Hide</button>

并确保包含 jQuery 库。

Answer 3

html：

<p>Press the button</p><button id="button1" >Show / Hide</button>
<div id="Ahover"></div>

js：

$('#button1').click(function(){
$('#Ahover').toggle();
 $("#Ahover").html('<object data="http://validator.w3.org/" />');
});

css：

div {
    height: 100%;
}

object {
    width: 100%;
    min-height: 100%;
} 

js小提琴： http : //jsfiddle.net/SsJsL/