Question

最近我开始学习一些HTML，我有点怀疑。我的目的是在第一页中创建一个div，它可以根据您在菜单上单击的元素而改变（而不是将您带到另一个HTML）。我已经尝试了一些使用javascript的东西，看看我是否可以使它工作，但我不能实现任何目标，尽管在其他帖子中这是给定的解决方案。

这是我到目前为止所做的：

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

这是另一个HTML文件：

＆＃13;

<!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>

＆＃13;

我想要的是，当我按下字符串（将来的按钮）时，菜单会级联，并且＆＃34; p＆＃34;显示在div部分中的内容将更改为第二个HTML信息，但我只能链接到另一个页面。

正如我所说，这些脚本中的一部分似乎可以正常工作，因为div load的脚本在其他答案中已经存在，但不能使它对我有效。

我不确定我在做什么，以及我这样做是不是最好的选择。

谢谢你，抱歉这件事。

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

Graphic for the main html

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

Answer 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可见。

希望这有助于您获得自己的目标。

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

1 个答案: