如何使用Javascript动态地将内容加载到DIV中 [英] How to dynamically load content into DIV using Javascript
问题描述
我有一个由5个不同页面组成的网站。
I have a website which consists of 5 different pages.
为了维护所有页面的设计，我将代码从主页复制并粘贴到所有其他HTML文档，以确保导航框和主要divs保持原位。
To maintain the design of all the pages, I copied and pasted the code from the main page to all the other HTML documents to make sure that the Navigation Box and the main divs stay in position.
我现在被要求以这样的方式实现设计：当我按下按钮时，其他HTML页面将动态加载到我的主索引页面上。这样，如果我需要更改页面的设计，我只需要更改索引页面，而不必为我拥有的每个HTML文档重复这些更改。
I've now been asked to implement the design in such a way where when I press a button, the other HTML pages will load dynamically onto my main index page. This way, if I need to change the design of the pages, I only have to change the index page and not have to repeat those changes for every single HTML document I have.
我尝试过使用Javascript，但我想不出任何足够的东西。我根本无法理解jQuery，如果有人清楚地了解如何使用jQuery或Javascript完成此任务，请您逐步向我解释一下吗？
I've tried using Javascript for this, but I can't think of anything that would suffice. I can't understand jQuery at all, if someone has a clear understanding of how to accomplish this task using jQuery or Javascript, could you please explain it to me step by step?
<!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>
推荐答案
你想做的是使用
What you wanna do, is load content using AJAX (XmlHttpRequest). That means, you have just one page with layout, and content/other pages are loaded without the need of reloading the page.
为此，您可以使用jQuerys .load（） 功能。文艺青年最爱的;你要做的是，将网站的内容作为简单的html文件，没有布局（标题等），并使用ajax你将它加载到页面。
For that, you can use jQuerys .load() function. Tl;dr; what you gonna do, is to have content of the website as simple html files, without layout (header etc), and using ajax you are gonna load it into the page.
您的主页 index.html 的内容可能如下所示（我在导航栏中删除了这些图片）
Content of your main page index.html could look like this (I removed those images in nav bar)
<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>
因此，在同一个文件夹中，您将拥有其他内容文件，但没有导航，包装标题等。只是简单的内容，如：
So in the same folder, you will have those other content files, but without navigation, wrappings header etc. Just plain content like:
<h1>About page</h1>
<p>Lorem Ipsum</p>
这篇关于如何使用Javascript动态地将内容加载到DIV中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
