Question

我希望我的页面有一个导航菜单，但我不希望每次更新时都将其复制并粘贴到每个网页，所以我试图把它放在一个单独的文件中并加载到一个格

Answer 1

<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="content.html"></div> 

<script>
w3IncludeHTML();
</script>

</body>
</html>

或PHP：

<html>
<body>

<div class="menu">
<?php include 'menu.php';?>
</div>

<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>

</body>
</html>

还有其他方法，我只包括两个。

Answer 2

最简单的方法是创建一个php文件并在那里插入代码。

例如：

在您的主文件中插入：

<div class="container">
<?php require 'example.php';?>
</div>

在“example.php”文件中插入：

<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>

Answer 3

在jQuery中，您可以使用.load( url [, data ] [, complete ] )功能 For more detail click here

Answer 4

正如您所描述的那样，您不想加载整个页面，只需加载一个div。据我所知，使用普通的javascript是不可能的。所以，我建议将这个div放在一个单独的html文件中（让我们称之为common.html），然后在每个页面中加载它。这可以通过这种方式实现：

document.getElementById("placeholder").innerHTML='<object type="text/html" data="common.html" ></object>';

如何将<div>从其他文件加载到我的页面中

4 个答案: