Question

我的HTML看起来像这样：

<div class="wrap">
    <select class="changer">
        <option value="http://stackoverflow.com">StackOverflow</option>
        <option value="http://google.com">Google</option>
        <option value="http://yahoo.com">Yahoo</option>
        <option value="http://twitter.com">Twitter.com</option>
    </select>
    <iframe src="http://stackoverflow.com"></iframe>
</div>
<div class="wrap">
    <select class="changer">
        <option value="http://stackoverflow.com">StackOverflow</option>
        <option value="http://google.com">Google</option>
        <option value="http://yahoo.com">Yahoo</option>
        <option value="http://twitter.com">Twitter.com</option>
    </select>
    <iframe src="http://stackoverflow.com"></iframe>
</div>

我的jQuery：

$('.changer').change(function () {
    $(this).next('iframe').attr('src', this.value);
});

和CSS：

.wrap {
    width:50%;
    float:left;
}
iframe {
    width:100%;
    height:500px;
display:block;
}

单击选择时，这会更改iframe的src。我怎么能最初隐藏iframe，直到点击某些东西？我尝试使用fadein / fadeout，但这并不是一直都有效。

Answer 1

将iframe元素设置为最初为display:none，例如：

iframe {
    width:100%;
    height:500px;
    display:none;
}

然后使用show()（相当于将元素＆＃39; s display属性设置为block）：

$(this).next('iframe').show().attr('src', this.value);

在变更时显示相关的iframe。

jsFiddle here.

要淡化它而不是仅显示它，您只需使用jQuery的fadeIn()方法：

$(this).next('iframe').fadeIn().attr('src', this.value);

jsFiddle here.

当选择了select选项时，jquery显示更改了src的iframe

1 个答案: