gpt4 book ai didi

javascript - 如何在div中显示另一个html文件

转载 作者:行者123 更新时间:2023-12-03 11:37:07 25 4
gpt4 key购买 nike

我有下面的 javascript 代码和 html 代码。我想要做的是,当我在下拉列表中选择一个选项时,子文件夹中的index.html 文件将显示在div 上。

<script>
function display() {
var cake = document.getElementById("type").value;
document.getElementById("cakes").innerHTML = '<object type="text/html"
data="\'+cake+'\index.html" > </object>';
}
</script>

<body>
<center><img src="LOGO.jpg" size=20%></img></center>
<p><center><font face="Brush Script MT" size="32" color="lightblue"`enter code here`>YOU'RE SO
SWEETS</font></center></p>
<table>
<tr>
<td><img src="home.png"></td>
<td><img src="product.png"></td>
<td><img src="online.png"></td>
<td><img src="about.png"></td>
<td><img src="contact.png"></td>
</tr>
</table>
<br>
<select id="type" multiple onchange="display()">
<option value="special">Specialty Cakes</option>
<option value="adult">Birthday Cakes for Adult</option>
<option value="kids">Birthday Cakes for Kids</option>
<option value="wedding">Wedding Cakes</option>
</select>
<br>
<div id="cakes"></div>

最佳答案

您应该使用 Ajax 加载 Div 中的内容。您可以从任何好的教程中了解 ajax。起点可能是 -

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first

更新:

根据您的评论,我的理解是 -

您可以利用 jquery 并在代码中使用以下代码片段的变体,该代码片段将在 select 的 onchange 事件中触发的任何函数中使用。您需要附加 jquery 库。

$('#your-div-id').load('your-html-page.html');    

谢谢。

关于javascript - 如何在div中显示另一个html文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26446124/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com