Question

我有两个HTML文档将链接到同一个站点。如何创建导航菜单，我只需要编辑一次，因为它的更改将应用于菜单所在的所有HTML文档？

我是HTML的初学者，已经学会了基础知识，但是请你帮忙吗？

这是菜单代码：

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="videos.html">Videos</a></li>
    <li><a href="games.html">Games</a></li>
    <li><a href="apps.html">Apps</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

Answer 1

只使用普通的HTML，您将无法做到这一点。

几个选项：

Javascript - 使用javascript，您可以将导航附加到每个页面。

PHP - 使用PHP是最简单的，您可以将导航作为代码包含在您的代码中。

在我看来，你应该使用php .. JavaScript对于这种特殊情况来说太过分了。我通常做的是创建一系列php文件，构成我网站的结构。

简单的结构将是

head.php
的index.php

创建一个名为head.php的php文件，你可以使用记事本，记事本++，netbeans等来做到这一点。

<强> head.php

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<!-- NAVIGATION SECTION HERE -->
<div class="nav">
<ul>
  <li><a href="http://google.com">First link</a></li>
</ul>
</div>

index.php或您的其他网页

<?php include "head.php"; ?>

<div>
content of html page
</div>

<div class="footer"></div>

</body>
</html>

如果您注意到index.php的顶部，您会看到一个include语句。这会将head.php内容添加到您调用此包含的任何页面中。由于您的导航部分位于head.php中，因此您的导航将在所有页面中保持一致。

为此，请确保您的主机允许您使用php。

Answer 2

如果我理解正确，您需要将一些HTML文件包含在另一个中。使用HTML少于第5版本，如果没有javascript，你就无法做到这一点。如果您不想使用PHP / Java / .NET解决方案，那么使用jQuery的最佳解决方案。但是不要忘记您将需要使用本地服务器（例如，Apache）。

<强>的index.html：

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" />
    <script type="text/javascript" src="script.js"/>
  </head>
  <body>
    <div id="menu">
    </div>
  </body>
</html>

<强>的script.js：

$(document).ready(function(){ 
  $.get("menu.html", function(data) {
    $("#menu").html(data);
  });
});

<强> menu.html：

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="videos.html">Videos</a></li>
    <li><a href="games.html">Games</a></li>
    <li><a href="apps.html">Apps</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

JQuery：jquery.com

文档：api.jquery.com/html

HTML中所有页面的导航菜单

2 个答案: