Question

我是JS的全新人物。我正在尝试做一些我不熟悉的事情，但这就是我学习东西的方式。我正在编写html网站，我使用了iframe元素。在这个iframe我想显示不同的htmls（点击）。所以我读了一些其他问题，包括这个问题：stackoverflow js iframe我编写了这段代码：

<li><p id="video" class="button"><a target="iframe">VIDEO</a></p></li>
<li><p id="kontakt" class="button"><a target="iframe">KONTAKT</a></p></li>

<li><iframe width="800px" height="1000px" frameBorder="0" name="iframe" src=""></iframe></li>

<script>
    $(".button").on("click", function() {
    $(this).toggleClass("underline");
    $(".button").not(this).removeClass("underline")
    }); 
</script>

<script>
$("#video").on("click", function() {
$('[name="iframe"]').src = "video_iframe.html"
}); 
</script>

<script>
$("#kontakt").on("click", function() {
$('[name="iframe"]').src = "kontakt_iframe.html"
}); 
</script>

但遗憾的是它不起作用。我做错了什么？

Answer 1

尝试更改此内容：

$('[name="iframe"]').src = "video_iframe.html"

到

$('[name="iframe"]').attr('src', 'video_iframe.html')

这会将src的属性设置为您想要的值。

Answer 2

$('[name="iframe"]')是一个jQuery对象 - 用于访问引用实际本机DOM元素所需的src属性。

$('[name="iframe"]')[0].src = "kontakt_iframe.html";

此外 - 您不需要多个script代码 - 只需使用一个并将代码放在那里。

Answer 3

您不必使用这么多次脚本标记。如果您使用的是jQuery click事件，那么就不需要<a target="iframe">。试试这个：

<li><p id="video" class="button">VIDEO</p></li>
<li><p id="kontakt" class="button">KONTAKT</p></li>

<li><iframe width="800px" height="1000px" frameBorder="0" name="iframe" src=""> </iframe></li>

<script>
$(".button").on("click", function() {
    $(this).toggleClass("underline");
    $(".button").not(this).removeClass("underline")
}); 


$("#video").on("click", function() {
    $('iframe').attr("src","video_iframe.html") 
}); 


$("#kontakt").on("click", function() {
    $('iframe').attr("src", "kontakt_iframe.html") 
}); 
</script>

更改iframe目标

3 个答案: