Question

当页面最初加载时，我有一个隐藏的iframe和其他可见的iframe。然后当单击一个按钮时，我需要隐藏一个之前可见的按钮，然后取消隐藏另一个按钮（实际上我需要在变得可见的那个上设置src属性，但接下来我会解决它）。我不想刷新整个页面（因此下面的返回false）。

点击按钮时，下面的代码不显示红色iframe2。你能告诉我为什么吗？

<form>
  <h1>Test</h1>
  <input type="submit" id="search" value="Search" />
</form>
<iframe id="frame0" style="background-color: blue" height="200" width="800" ></iframe>
<iframe id="frame1" style="background-color: yellow" height="200" width="800" ></iframe>
<iframe id="frame2" style="visibility: hidden; background-color: red" height="200" width="800" ></iframe>

<script type="text/javascript">
$(document).ready(function(){
    $( "#search" ).click(function(event) {
        $("#frame1").hide();
        $("#frame2").show();
        $('#frame2')[0].contentWindow.location.reload(true);
        return false;
    });
});
</script>

Answer 1

用户disply投注visibility编辑，您的frame2如下：

<iframe id="frame2" style="display: hidden; background-color: red" height="200" width="800" ></iframe>

这是工作jsfiddle：

https://jsfiddle.net/keval/vqyczm7a

Answer 2

jQuery的.show() and。hide（）使用CSS显示属性，与visibility属性相反。

.show() = css('display', 'block')
.hide() = css('display', 'none')

但是，您可以使用.toggle()隐藏或显示基于其当前状态的元素。我认为这是你需要的，因为你想要隐藏之前可见的那个。

您需要更改iframe可见性样式才能使用显示

<iframe id="frame2" style="display: none; background-color: red" height="200" width="800" ></iframe>

然后使用.toggle()

而不是显示和隐藏iframe

$( "#search" ).click(function(event) {
    $("#frame1").toggle();
    $("#frame2").toggle();
    $('#frame2')[0].contentWindow.location.reload(true);
    return false;
});

请参阅我的工作示例：https://jsfiddle.net/o2gxgz9r/14250/

只刷新某些iframe而不用jQuery刷新整个页面

2 个答案: