Question

我已经研究了一些谈论php，javascript，iframe等的答案，但我尝试了一对，但没有一个能够工作。我是HTML编码的新手......一般编码！

<link rel="menu" href="menu.html"> does nothing
<!--#include virtual="/menu.html" --> does nothing (presumably because its a comment?) 

<iframe src="page.html"></iframe>

或对象...都将菜单放在一个愚蠢的小滚动框中。

我想在我的页面上运行我的菜单，好像它是C中的一个函数。我可以只包含它，它就在那里，或者只是链接它。

感谢您的帮助！瑞恩

网页文件：biology.html 菜单文件：menu.html

<div class="container">
 			<a href="index.html"><img src="homeicon.jpg" width="50" alt="Home"></a>
 	<div class="redhover">
				<div class="dropdown">
  					<button class="dropbtn">GCSEs</button>
  					<div class="dropdown-content">
    					<a href="chemistry.html">Chemistry</a>
    					<a href="biology.html">Biology</a>
  					</div>
  				</div>
				<div class="dropdown">
  					<button class="dropbtn">A-Levels</button>
  					<div class="dropdown-content">
    					<a href="chemistry.html">Chemistry</a>
    					<a href="biology.html">Biology</a>
  					</div>
				</div>
				<div class="dropdown">
  					<button class="dropbtn">University</button>
  					<div class="dropdown-content">
    					<a href="chemistry.html">Telecommunications</a>
    					<a href="biology.html">Electronic Engineering</a>
  					</div>
  				</div>
				<div class="dropdown">
  					<button class="dropbtn">More</button>
  					<div class="dropdown-content">
      					<a href="biology.html">About me</a>
    					<a href="https://www.youtube.com/channel/">Youtube</a>
  					</div>
				</div>
	</div>
</div>

Answer 1

您可以使用php在其他页面上包含文件。以下是一些示例代码，可帮助您入门：

<?php
    require_once('menu.php');
?>

您可以将其放入HTML页面中，但是必须确保可以在服务器上处理php，并且包含php代码的文件必须以.php扩展名结尾。

还有其他通过php包含文件的方法，请看这里： http://php.net/manual/en/function.include.php 和 http://php.net/manual/en/function.require.php

Answer 2

编辑 - 我不是这种方法的忠实粉丝，但它可以在Github页面上运行。

创建一个名为nav.js的文件，将您的菜单定义为js变量，然后使用javascript将其插入到每个页面上创建的空div中。这种更新你的导航的方法，你只需要编辑nav.js不漂亮，但它的工作原理

nav.js

var navigation = "<nav>";
navigation +=   "<ul>";
navigation +=   "<li>Home</li>";
navigation +=   "<li>About</li>";
navigation +=   "</ul>";
navigation +=   "</nav>";

document.getElementById("navigation").innerHTML = navigation;

其他页面

<div id="navigation"></div>
<!--rest of page goes here.-->
<script src="nav.js"></script>

小提琴：https://jsfiddle.net/ze3hLxx8/1/

Answer 3

根据您希望/想要/需要使用的后端技术，有多种方法可以将文件包含到另一个文件中。

PHP

在php中最常用的方法是在php文件中使用include或require语句。

在您的特定情况下，您的biology.html文件必须转换为biology.php文件，然后您可以添加相关代码以包含该文件：

<?php include('menu.php');?>

此简单语句会将menu.php文件中的内容添加到当前页面。如果服务器上没有php，这将不工作，显然不在没有本地开发的情况下在本地工作环境

require和include之间的差异可以在官方文档中找到：

包括：http://php.net/manual/en/function.include.php
要求：http://php.net/manual/en/function.require.php

SSI

另一种方法是使用服务器端包含。要使用SSI，必须在Web服务器上支持并启用它。要使用SSI，您需要将扩展名从biology.html更改为biology.shtml，然后添加以下语句：

<!--#include file="menu.html" -->

有关服务器端包含的更多信息，请访问维基百科：https://en.wikipedia.org/wiki/Server_Side_Includes

如何使用HTML将菜单文件包含并链接到每个网页？

3 个答案:

PHP

SSI