11

我敢肯定这个话题一直都在出现，
但我似乎无法给出一个简洁的答案。

我有一个垂直菜单栏，我想在网页中重复使用 (>20)。以Menu BarHTML 编码并使用：UL, LI, A、<Div>标签和 CSS。我们需要这个：

  1. 可重复使用的
  2. 可维护
  3. 可扩展

因此我们不必每次添加页面时都修改所有页面。

如果可能，我们宁愿避免使用编码方法。我们可以只使用一个我们根据需要编辑的主文件。由于我们正在使用CSSand <div>s，我认为帧不适合我们。我们能做什么？

4

10 回答 10

8

如果您不想使用编程语言，服务器端包含是要走的路。

他们采取这种形式：

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

并将插入到页面中，无论您将该标签放在 HTML 中的任何位置。它需要服务器端解析，因此您的 Web 服务器必须启用服务器端包含。您可以尝试一下，如果它不起作用，请联系您的服务器主机以查看是否可以启用它们。如果是 Apache，还有一种方法可以通过 .htaccess 文件启用它们。

于 2009-08-04T19:13:51.237 回答
2

为此，您必须使用一些服务器端技术。例如你可以...

  • 将它们包含在 php 中

  • 将它们放在.net 的母版页中

  • 把它放在rails中的部分或布局页面中

一些阅读：

http://us.php.net/manual/en/function.include.php

http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx

另一种解决方案是使用 Javascript 创建所有这些，但请不要那样做 :)

html:

<script type="text/javascript" src="hack.js"></script>
<div id="mymenu">
</div>

hack.js：

function createMenu(){
  $("#mymenu").html("all the html of your menu");
}
于 2009-08-04T19:11:02.537 回答
2

无需任何服务器端脚本或 Javascript，您就可以使用对象或 iframe 标记。

http://www.w3schools.com/tags/tag_object.asp

http://www.w3schools.com/tags/tag_iframe.asp

唯一需要注意的是在链接中指明 target="parent"。

希望能帮助到你

于 2011-09-28T10:51:31.920 回答
2

使用 w3 脚本..

索引.html

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

<body>

<div w3-include-html="header.html"></div>
<div w3-include-html="nav.html"></div>

<script>
w3IncludeHTML();
</script>

</body>
</html>

header.html

<h1>Title</h1>

导航.html

<h2>Your nav</h2>

另见：http ://www.w3schools.com/howto/howto_html_include.asp

并且不要忘记在您的本地主机上测试此代码。

于 2016-12-15T19:16:58.340 回答
1

我面临着同样的事情。然后，我创建了一个新文件来存储导航栏的 html。

我创建了一个文件 navbar.html ，其中包含我所有的导航条码。然后，在您想要导航栏的主 html 文件中，使用 jquery 包含此文件。

$(document).ready(function() {
    $('#navigation').load('navbar.html');
});

然后在你想要导航栏的地方，添加这一行：

<div id="navigation"></div>
于 2014-08-25T04:24:10.740 回答
1

我已经完成了这两种不同的方式 - 一种使用服务器端 (PHP)，另一种使用 Javascript 包含（用于需要能够在没有任何互联网连接或服务器功能的情况下运行的演示）。

对于 PHP 包括，您的页面必须以 .php 而不是 .htm 或 .html 结尾，这些非常适合替换您的页眉、页脚、导航等。在多个页面上重复的任何内容。

基本上你会创建你的普通代码，然后复制并粘贴你想要打破的代码——在这个例子中，你的导航——并将它保存在另一个名为（例如）inc_navigation.htm的文件中（这个页面可以被称为.htm）。

然后在您的实际页面中，您将使用以下代码：

<?php include('inc_navigation.htm') ?>

这将在此时插入您的导航，如果您进行更改以使其进入 .htm 文件，它将传播到包含该文件的任何页面。

对于 javascript 包含，您必须在要包含导航的每个文档的顶部包含以下行：

<script type="text/javascript" src="includes.js"></script>

然后，您将创建一个名为 includes.js 的文档。

在本文档的顶部，您将声明您的导航变量：

var navigation  = new Array();  // This is for the navigation.

然后在同一个文档中稍微向下一点，您需要实际概述您的导航代码（方括号中的行号至关重要 - 保持它们的顺序并从 0 开始 - 在此代码中不能有换行符，因此每一行代码必须是新行）：

// ==================== Navigation ==================== //
navigation[0]   = '<div id="tab_navigation">';
navigation[1]   = '<ul id="dropline">';
navigation[2]   = '<li><a href="index.htm"><b>Home</b></a></li>';
navigation[3]   = '<li><a href="about_us.htm"><b>About Us</b></a></li>';
navigation[4]   = '</ul>';
navigation[5]   = '</div><!-- Close TAB NAVIGATION -->';

然后，在此之后，您将实际插入 javascript，该 javascript 会将代码放入您的页面（它实际上并未将其放在那里，而是使其在页面中可访问，而无需实际更改 .htm 页面的代码 - 所以如果您查看源代码，您会看到对代码的引用，而不是代码本身）。

function show(i)
 {
  for (x in i)
  {
   document.write(i[x]+'\n')
  }
 }

最后 - 在您的 .htm 文档中，例如您的 index.htm 页面，您将使用以下代码替换您的导航代码（您放入上面称为导航的块中）：

<script type="text/javascript">show(navigation);</script>

SHOW 之后和括号中的名称是变量的名称（前面已声明）。

如果您想查看它们，我有网站显示两种方法都在使用中，只需给我发消息即可。

于 2009-08-05T16:46:29.313 回答
1

作为对一个六年前的问题的现代答案：Web 组件是专门可重用的 HTML 组件，而Polymer可能是目前最流行的实现。目前几乎没有浏览器原生支持 Web Components，所以至少需要一个 Javascript polyfill。

于 2015-09-09T13:49:56.040 回答
0

到目前为止，我发现的最好的解决方案之一是按照 Suckerfish XHTML/CSS 解决方案的Son of Suckerfish XHTML/CSS 解决方案对菜单进行建模，该解决方案在 Internet 上有很好的记录，现在结合服务器上的一些逻辑来呈现无序列表。通过使用无序列表，您有几个不同的选项来输出结果，但只要菜单有一些基本的层次结构，您就可以生成它。然后对于实际页面，您需要做的就是包含对菜单生成函数的引用。

于 2009-08-04T19:13:52.140 回答
0

如果您要使用 PHP，您所要做的就是使用该include命令，除此命令之外无需编码。
此外，检查服务器端包括

于 2009-08-04T19:09:27.563 回答
0

我正在寻找一种编写可重用导航菜单的方法，该菜单在单击按钮时会切换（显示/隐藏）。我想分享一个对我有用的解决方案，以防其他人也想做同样的事情。此解决方案使用 jQuery、html 和 css。

将这行代码添加到主 index.html 文件中的 head 标记中：

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

在 body 标签中为您的导航添加 div：

<div id="mySidenav" class="sidenav"></div>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#mySidenav").load("nav.html").toggle().width("400pt");
  });
});
</script>

创建一个 html 文件，该文件将是您的导航菜单所在的位置。我的文件名为 nav.html，文件内部的内容如下所示：

<a href="musubi.html">have you found your one true musubi?</a>` <a href="example2.html">item2</a> <a href="example3.html">item3</a>

于 2020-04-02T05:39:54.543 回答