所以我最近才开始进行web设计。我的index.html有一个菜单(包含指向不同页面的链接)。index.html页面上的菜单(以一种非常简化的方式，没有css之类的东西)看起来像这样：
<ul>
<li><a class="active" href="index.html"></li>
<li><a href="contactus.html"></li>
<li><a href="help.html"></li>
<ul>
and then there is the content of the page (text, slideshow, images...) - say
<div>
<h1><img><p><script>
</div>
contactus.html页面看起来像这样：
<ul>
<li><a href="index.html"></li>
<li><a class="active" href="contactus.html"></li>
<li><a href="help.html"></li>
<ul>
and then there is the content of the page (text, slideshow, images...) - say
<div>
<h1><img2><p><script>
当你点击链接时，它会引导你进入另一个页面。假设我们有index.html，我们点击菜单中的一个链接，它会引导我们进入contactus.html。它会更改页面，contactus.html必须加载。问题是：是否可以使contactus.html的内容出现在index.html上(并替换它)，但不需要另加载一个页面？我做了一些研究，发现了一些关于innerHTML的东西，但我真的不知道如何使用它。不久前我开始使用js。我希望这个问题在某种程度上讲得通。非常感谢你的建议和建议。
是的。CCD_ 1。还有很多其他方式。我喜欢React，但它肯定有一个学习曲线。我不知道真正的web开发人员是否仍然使用jQuery，但它使许多DOM操作变得非常简单。祝你好运
您使用什么服务器？html文件是使用apache还是ngnix？您可以获得"；Contacts.html"；并用它替换内容的html。
例如：
$.get("contacts.html", function(data, status){
document.getElementById("content").innerHTML = data;
});
这段代码使用jQuery处理ajax请求，您可以只使用javascript来使用XMLHttpRequest。注意：您不应该只运行html。如果没有html服务器，这将不起作用。干杯
这将是一个极其简单的答案，因为这是一个巨大的论点。。。但让我们从一些基础知识开始。
目标是从网页(index.html)开始，加载一些内容并只更新当前页面中的部分内容。
我将为等式的客户端和服务器端提出两种不同的方法。
jQuery+HTML片段
这种方法的思想是使用jQuery来管理AJAX请求，以便从服务器检索一些内容，并更新当前页面的DOM以显示新内容。
服务器端
在这里，您需要公开一些内容，在最简单的情况下，它可能只是html的一个片段，如下所示：
fragment.html
<p>My asynchronously loaded content!<p>
上面的片段可以通过apache或nginx直接作为静态内容公开，也可以使用PHP、Java、C#或任何支持web开发的编程语言动态生成。
客户端
在客户端上，我们希望通过javascript联系服务器，并通过AJAX请求检索内容，然后更新html。jQuery使我们能够同时做这两件事。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</head>
<body>
<h1>Home page</h1>
<div id="content">
<p>Welcome!</p>
</div>
<div>
<button id="update-btn">Update content</button>
</div>
<script>
$(document).ready(function() {
$('#update-btn').click(function(){
$.get('http://myserver/fragment.html').then(function(data) {
$('#content').html(data);
});
});
});
</script>
</body>
</html>
我们有一个id为content的div，我们将使用它作为新内容的目标，还有一个id为的按钮更新btn以启动请求。
在<script>块中，我们首先将click事件与按钮相关联，以便在单击时使用jQuery get方法向服务器发送ajax请求，并使用jQuery html方法更新html内容。
Javascript框架+REST API
这肯定是一种更复杂的方法，一个完整的指南/示例超出了SO答案的范围(对于每个客户端框架和每个服务器端语言/框架，都有数百页长的书)，但让我们探索一下这个想法背后的基本概念。
在前面的例子中，我们让服务器生成一个html，然后客户端请求更多的html来更新自己。这里的基本思想是相同的，但有一个更明确的关注点分离，即服务器负责生成原始数据并将其发送给客户端(通常是JSON或XML格式)，客户端必须管理所有的表示和用户交互方面。
作为一个例子，我们可以分析黑客新闻获取项目api。
url结构为https://hacker-news.firebaseio.com/v0/item/｛item id｝.json？print=漂亮的
我们可以用一个id作为路径变量和一个名为print的可选查询参数来发出GET请求，它将返回一些JSON数据。
例如，我们可以curl https://hacker-news.firebaseio.com/v0/item/25213368.json?print=pretty并得到以下响应：
{
"by" : "harporoeder",
"descendants" : 8,
"id" : 25213368,
"kids" : [ 25224137, 25224226, 25224397 ],
"score" : 31,
"time" : 1606333258,
"title" : "Use `nproc` and not grep /proc/cpuinfo",
"type" : "story",
"url" : "https://www.flamingspork.com/blog/2020/11/25/why-you-should-use-nproc-and-not-grep-proc-cpuinfo/"
}
一旦我们公开了所需的所有服务，就可以使用许多不同的框架和库来构建客户端。在第一种方法中，我们使用了jQuery，它适用于非常简单的用例，但当我们开始为应用程序增加复杂性时，它可能会成为编写和维护的地狱，这就是为什么有许多不同的框架来实现客户端，如：VueJS、React、SvelteJS、Angular、Aurelia和许多其他框架。
这些javascript框架中的每一个都有一个很大的学习曲线，您可能还需要学习如何使用Nodejs、NPM、transfiler和bundler来利用整个现代javascript基础设施。
这不是一段容易的旅程，但如果你决定走这条路，你会学到一项宝贵的技能。
希望这能给你一个如何继续学习网络开发的想法。
这是您使用普通javascript的答案。
index.js文件为：
onclick = "changeHtml()";
const button = document.getElementById("btn");
button.addEventListener("click", function () {
document.getElementById("app").innerHTML = `
<h1>I'm another HTML</h1>
<div >
<p>Look at me</p>
</div>
`;
});
index.html文件为：
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<h1>Hello Vanilla!</h1>
<div>
<p>This is initial HTML</p>
<button id="btn">Click Me!</button>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
您可以更改HTML中任何标记的内容。如<body>、<a>等