Question

我正在寻找一种在所有.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文件进行更改。我想知道我是否可以将这一大块代码变成一个＆＃34;类＆＃34;某种形式，并在我的所有html文件中引用它，并使用某种属性来表示它。所以，当我更改列表＆＃34; class＆＃34;所有html文件都将反映在该更改中。

Answer 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 doucment。

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

Answer 2

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

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

Answer 3

您可以使用JavaScript或使用服务器端技术建议您的菜单。

但是在干净的HTML中你可能不得不使用我不推荐的帧。 html5中可能有一个解决方案，但我不确定。

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

祝你好运！

Answer 4

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

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

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

4 个答案: