HTML 将 html 文件中 div 的内容加载到另一个 html 文件中答案

【问题标题】：HTML load the content of a div in a html file into another html fileHTML 将 html 文件中 div 的内容加载到另一个 html 文件中
【发布时间】：2017-01-16 21:15:07
【问题描述】：

最近我开始学习一点 HTML，我有点怀疑。我的意图是在第一页中制作一个部分 div，它可以根据您在菜单上单击的元素而改变（而不是将您带到另一个 HTML）。我已经用 javascript 尝试了一些东西，看看我是否可以让它工作，但尽管在其他帖子中给出了解决方案，但我没有取得任何成果。

这是我目前所拥有的：

.sideNav {
	position: fixed;
	width: 250px;
	height: 100vh;
	left: 0;
	right: 0;
	background-color: red;
	top: 60px;
}

.contentWrapper {
	margin: 60px 0 0 250px;
	padding: 0 30px;
	left: 0;
	top: 0;
	background-color: blue;
}

<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset = utf-8>
		<link rel = "stylesheet" href = "./assets/stylesheets/main.css">
		<script type="text/javascript">
			function toggleMenu(id) {
				var menuBox = document.getElementById(id);
				if(menuBox.style.display == "block") {
					menuBox.style.display = "none";
				} else {
					menuBox.style.display = "block";
				}
			}
		</script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
		<script>
			$(document).ready(function() {
    			$(".menuAnchor").on("click", function() {
    				event.preventDefault();
    				$("#contentWrapper").load("food.html" + " #contentWrapper");
        return false;
        		)};
        	)};
		</script>
		<title>The Nest</title>
		
		
	</head>
	<body>
		<aside class = "sideNav">
			<div>
				<a class = "menuAnchor"  onclick = "toggleMenu('foodMenu')"> Food</a>
				<ul class = "menuBox" id = "foodMenu" style = "display : none">
					<li>
						<a id = "burguer" href = "#">Burguer</a>
					</li>
					<li>
						<a id = "hotDog" href = "#">Hot Dog</a>
					</li>
					<li>
						<a id = "pizza" href = "#">Pizza</a>
					</li>
				</ul>
			</div>
		</aside>
		<div id = "contentWrapper">
			<section class = "contentWrapper">
				d
			</section>
		</div>
	</body>
</html>

这是另一个 HTML 文件：

<!DOCTYPE html>

<html lang="en">
	<body>
		<div id = "contentWrapper">		
			<section class = "contentWrapper">
				<h1>Food</h1>
				
				<article id = "burguer">
					<h2>Burguer</h2>
					<p>
						Burguer
					</p>
				</article>
				<article id = "hotDog">
					<h2>Hot Dog</h2>
					<p>
						Hot Dog
					</p>
				</article>
				<article id = "pizza">
					<h2>Pizza</h2>
					<p>
						Pizza
					</p>
				</article>
			</section>
		</div>
	</body>
</html>

我想要这样，当我按下字符串（将来的按钮）时，菜单会级联，出现在 div 部分中的“p”会更改为第二个 HTML 信息，但我只能链接到另一个页面.

正如我所说，这些脚本的一部分似乎可以工作，因为 div 加载的脚本在其他答案中存在，但不能让它为我工作。

我不确定我在做什么以及如何做是最好的选择。

谢谢，给您带来的麻烦。

我正在尝试的是，拥有一个带有头部和菜单的主 html：

Graphic for the main html

当菜单中的一个链接被按下时，内容与其他 html 中的另一个内容发生了变化，比如说食物。

【问题讨论】：

请扩展“不能让它为我工作”。查看您的控制台，看看那里是否有任何错误。
您正在尝试加载“food.html#contentWrapper”，但您的示例 HTML 中没有这样的 id。您有一个带有 class “contentWrapper”的 div，另一个带有 id “contesntWrapper”的 div - 这可能是一个错字，如果修复，至少会给您一个匹配的元素。
@Mike McCaughan 我的意思是，在寻找它时，还有其他看起来相同的人的帖子，但使用答案中的脚本并没有给我任何结果。 sn-p 中有一个我不知道原因的错误，但在 eclipse 中我没有收到任何错误，并且通过链接的导航工作，以及用于扩展菜单的其他脚本。
@Paul Roub “contesntWrapper”确实是一个错字。已经解决了，谢谢指出。
因此，为了让任何人帮助您，您需要提供该错误。否则我们只是猜测问题所在。请阅读How to Ask。

标签： javascript jquery html css

【解决方案1】：

你的问题很不清楚，但是，我会根据我对你问题的理解提供一个解决方案：

如果你想要一些用于替换 div 内容的 html，请考虑模板标签：https://developer.mozilla.org/en/docs/Web/HTML/Element/template

模板不显示，但可以使用 jQuery（我看到你正在使用）访问，例如： html:

<div id="replace-area">
</div>
<template id="replace-content">
    <ol>
        <li>Here</li>
        <li>Are</li>
        <li>Some</li>
        <li>Items</li>
    </ol>
</template>

jQuery:

$("replace-area").html($("replace-content").clone().html());

使用包含您希望用户在最后看到的内容的替换区域和包含您想要放入替换区域的内容的替换内容。

这将导致：

<div id="replace-area">
    <ol>
        <li>Here</li>
        <li>Are</li>
        <li>Some</li>
        <li>Items</li>
    </ol>
</div>
<template id="replace-content">
    <ol>
        <li>Here</li>
        <li>Are</li>
        <li>Some</li>
        <li>Items</li>
    </ol>
</template>

只有 div 可见。

希望这能帮助你得到你想要的。

【讨论】：