如何在 HTML 中为我的导航栏创建一个“类”？答案

【问题标题】：How to create a "class" in HTML for my navigation bar?如何在 HTML 中为我的导航栏创建一个“类”？
【发布时间】：2014-12-15 21:45:31
【问题描述】：

我正在寻找一种在我的所有 .html 页面中都有导航栏的方法，而无需多次复制和粘贴。

代码如下：

<center>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="education.html">Education</a> </li>
            <li><a href="employment_history.html">Employment History</a></li>
            <li><a href="volunteer_work.html">Volunteer Work</a></li>
            <li><a href="contact_information.html">Contact Information</a></li>
        </ul>
    </nav>
</center>

每次更改其中一个链接时，我都需要更改所有 HTML 文件。我想知道我是否可以让这段代码成为某种“类”，并在我的所有 html 文件中引用它，并用某种属性表示它。因此，当我更改列表“类”时，所有 html 文件都将反映在该更改中。

【问题讨论】：

查看服务器端包含或任何包含部分文件（如 PHP）的服务器端技术。
最简单的方法是使用 PHP，不幸的是，如果你想使用 HTML，你真的没有太多选择。您可以使用 iFrame，但现在这是不好的做法。
旁注。 <center> 元素不再存在。使用 CSS 定位您的内容。
如果您没有机会使用 PHP，您可以将 Navigationbar 包装到 JavaScript 字符串中。您需要在每个页面上引用此 js 文档，并且您需要一个元素（具有特定 id），您可以在其中使用如下代码“粘贴”您的 js-var：document.getElementById("navigationBarContainer").innerHTML += var
查看 PHP。你不能用 HTML 做到这一点，因为它只是一种标记语言。例如，您可以使用导航条码创建一个名为“nav.html”的单独文件。然后，您可以使用 require_once() 等简单函数将该代码包含到其他页面中；访问php.net/manual了解更多信息。

标签： html css navigation web

【解决方案1】：

你可以这样给你导航类。

  <link src="style.css"/>
  <body>
    <center>
        <nav class="navClass"> //giving the nav element a class
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="education.html">Education</a> </li>
                <li><a href="employment_history.html">Employment History</a></li>
                <li><a href="volunteer_work.html">Volunteer Work</a></li>
                <li><a href="contact_information.html">Contact Information</a></li>
            </ul>
        </nav>
    </center>
    </body>

如果您对所有导航都执行此操作并为所有页面使用相同的 css 文档，您可以通过这种方式在 css 中调用它们。您将需要一个外部 css 文档。

//style doucment
<style>
    .navClass{background-color:#FF0000}
</style>

【讨论】：

谢谢你，这很有帮助！

【解决方案2】：

您也可以尝试使用 jquery 模板插件

在这里查看一个： https://github.com/codepb/jquery-template

【讨论】：

【解决方案3】：

您可以使用 JavaScript 或按照建议使用服务器端技术制作菜单。

但在干净的 html 中，您可能不得不使用我不推荐的框架。 html5中可能有解决方案，但我不确定。

如果您习惯 OOP，我建议您使用服务器端方法。

祝你好运！

【讨论】：

我今天和我的教授谈过这个问题，是的，他提到要按照这个思路做一些事情。他说他的网页有一个通用布局，当用户在页面上提出请求时，布局将填满他数据库中的信息。感谢您的反馈

【解决方案4】：

大多数文本编辑器都有在文件或目录中查找和替换的功能。其他人提到了服务器端解决方案的可能解决方案 - Jeremy Keith 的书 Bulletproof AJAX 被证明对我很有用，但需要安装 PHP 或 IIS 等服务器端技术。

否则，我曾经使用 Dreamweaver 创建模板，它允许您更新菜单，然后更新包含该菜单的所有位置，但可能有开源解决方案允许人们提出相同的建议？

【讨论】：