Question

我使用cssmenumaker创建了一个菜单，我收到了以下内容;

的index.html

的script.js

styles.css的

我正在寻找将这些添加到我的所有页面中的最简单方法。到目前为止，我有超过100页，我希望避免将index.html中的代码放入每个页面。

目前有这样的事情：

头

<link rel='stylesheet' type='text/css' href='styles.css' />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript' src='menu_jquery.js'></script>

体＆GT;

UL＆GT;

    "LOADS OF MENUS"

/ UL＆GT;

想要参考&& 34; LOADS OF MENUES＆＃34;从一个位置开始，以便在以后编辑它们。

Answer 1

有很多不同的方法可以做到这一点..

对于纯PHP

< ?php include 'header.php'; ?>
<br/>
Your content
<br/>
< ?php include 'footer.php'; ?>

for HTML PHP

在您必须在每个页面中添加以下代码后，将index.html更改为header.php。所有关于你需要本地服务器或托管服务器

< ?php include 'header.php'; ?>
<br/>
Your content here
<br/>
< ?php include 'footer.php'; ?>

对于没有PHP的纯HTML

<html>
<head>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="header"></div>
<br/>
Your content here
<br/>
<div id="footer"></div>
<script>
$("#header").load("header.html");
$("#footer").load("footer.html");
</script>
</body>
</html>

Answer 2

由于它是一个内部网站点，我认为seo不是问题，所以你只能将菜单保存在那个html文件中并使用xhr包含它：

<script>
var xhr = new XMLHttpRequest();

xhr.onload = function(e) {
  document.write(xhr.responseText);
}
xhr.open("GET", 'menu.html', true);
xhr.send();
</script>

将此包含在您希望菜单所在的evey页面上。

Answer 3

我建议使用PHP来解决此问题。

<?php
require "menu.php";
?>

<!DOCTYPE html>
<html>
<body>
<?php echo $menu;?>
//Other page code here
</body>
</html>

在menu.php中

<?php
$menu = "


//Menu Code Here


";
?>

这样，您只需编辑menu.php即可轻松更改菜单。

将菜单添加到多个页面

3 个答案: