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() 
});

Fiddle

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

谢谢，最后通过将脚本移动到标记中来实现它。

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 click事件应用于它。

<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 fiddle：http://jsfiddle.net/SsJsL/

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

3 个答案: