我有一个由 5 个不同页面组成的网站。
为了保持所有页面的设计，我将主页上的代码复制并粘贴到所有其他 HTML 文档中，以确保导航框和主 div 保持在适当的位置。
我现在被要求以这样的方式实现设计:当我按下按钮时，其他 HTML 页面将动态加载到我的主索引页面上。这样，如果我需要更改页面的设计，我只需更改索引页面，而不必为我拥有的每个 HTML 文档重复这些更改。
我尝试过使用 Javascript 来实现此目的，但我想不出任何足够的方法。我根本无法理解 jQuery，如果有人清楚地了解如何使用 jQuery 或 Javascript 完成此任务，您能一步步向我解释吗？
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="CSS/Index.css">
</head>
<script src="websitescript.js"> </script>
<body>
<div class="mainwrapper">
<div class="navbox">
<input type="image" id='about' src='images/about.jpg'
onclick="myFunction()"> </a>
<a href="location.html"> <img src='images/location.jpg' class="location">
</a>
<input type="image" id='contact' src='images/contact.jpg'
onclick="myFunction()"> </a>
<a href="inquiries.html"> <img src='images/inquiries.jpg' class="inquiries">
</a>
<a href="employees.html"> <img src="images/employees.jpg" class="employees">
</a>
</div>
<img src="images/duo.jpg" class='logo'>
<div id="header">
</div>
</div>
最佳答案
您想要做的是使用 AJAX 加载内容(XmlHttpRequest)。这意味着，您只有一个带有布局的页面，并且无需重新加载页面即可加载内容/其他页面。
为此，您可以使用 jQuery .load()功能。太;博士;你要做的就是将网站内容作为简单的 html 文件，没有布局(标题等)，然后使用 ajax 将其加载到页面中。
主页index.html的内容可能如下所示(我删除了导航栏中的那些图像)
<div class="mainwrapper">
<div class="navbox" id="js-navigation">
<a href="./about.html">About</a>
<a href="./location.html">Location</a>
<a href="./contact.html">Contact</a>
<a href="./inquiries.html">Inquiries</a>
<a href="./employees.html">Employees</a>
</div>
<div id="header"></div>
<div id="js-content">
<!-- content will be loaded here -->
</div>
</div>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {
$('#js-content').load('/about.html');
$('#js-navigation a').click(function(e) {
e.preventDefault();
$("#js-content").load(e.target.href);
})
});
</script>因此，在同一个文件夹中，您将拥有其他内容文件，但没有导航、包装标题等。只是简单的内容，例如:
<h1>About page</h1>
<p>Lorem Ipsum</p>
关于javascript - 如何使用 Javascript 将内容动态加载到 DIV 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45030059/