Question

我的网站有一个导航栏：

    <div id='menu'><ul>
    <li><a href='index.html'>Home</a></li>
    <li><a href='about.html'>About Us</a></li>
    <li><a href='http://www.brownpapertickets.com' target=_blank>Ticket Sales</a></li>
    <li><a href='merch.html'>Merchandise</a>
        <ul>
            <li><a href='merch.html'>Products</a></li>
            <li><a href='cart.html'>Shopping Cart</a></li>
        </ul>
    </li>
    <li><a href='past.html'>Past Shows</a>
        <ul>
            <li><a href='photos.html'>Photo Gallery</a></li>
            <li><a href='vids.html'>Video Clips</a></li>
        </ul>
    </li>
</ul></div>

我想将它存储在一个中心位置，这样每次我都要添加一个超链接或其他东西，我不必编辑每个文件。最好的方法是什么？

Answer 1

假设您使用的是脚本语言，例如PHP，您只需将上面的HTML保存在名为header.php的php文件中（或根据自己的喜好）

然后在你写的其他php文件中：

include_once('header.php');它将在那里填充HTML。

为您提供的一些资源：

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

http://www.php.net/manual/en/function.include-once.php

http://php.about.com/od/tutorials/ht/template_site.htm

享受！

Answer 2

<强>更新 @AlienWebguy指出，这些解决方案会损害您在搜索引擎结果中的排名。如果您关心这一点，请不要使用它们。但在我看来，作为有效的选择，他们值得了解。

如果服务器端包含（使用PHP或其他语言）不是一个选项，您可以使用：

<强>帧
在您的所有网页中，添加iframe（样式为无边框或滚动条）并将src设置为包含导航标记的HTML文件。 ~~当然，你将遇到以下链接的麻烦，你可能不得不诉诸JavaScript来获得'正确'的行为。这可能不值得。~~要正确关注链接，您需要使用_top（或_parent）导航链接中的target attribute。这可能是最简单的解决方案，即使在没有脚本支持的用户代理中也应该有效。

例如，您的页面将如下所示：

<html>
<body>
    <iframe src="navbar.html" class="navbar" />
    <!-- other content here -->
</body>
</html

使用navbar.html，如下所示：

<html>
<body>
    <div id='menu'><ul>
        <li><a href='index.html' target="_top">Home</a></li>
        <li><a href='about.html' target="_top">About Us</a></li>
        <li><a href='http://www.brownpapertickets.com' target="_blank">Ticket Sales</a></li>
        <li><a href='merch.html' target="_top">Merchandise</a>
            <ul>
                <li><a href='merch.html' target="_top">Products</a></li>
                <li><a href='cart.html' target="_top">Shopping Cart</a></li>
            </ul>
        </li>
        <li><a href='past.html' target="_top">Past Shows</a>
            <ul>
                <li><a href='photos.html' target="_top">Photo Gallery</a></li>
                <li><a href='vids.html' target="_top">Video Clips</a></li>
            </ul>
        </li>
    </ul></div>
</body>
</html>

<强>的Ajax
以HTML片段（不是完整的HTML文档）的形式保存导航栏所需的HTML，并在页面加载时使用ajax加载它。这是使用jQuery的一个例子。在您的页面上：

<html>
<script type="text/javascript">
    $(document).ready(function(){
        $('#menu').('navbar.html');
    });
</script>

<body>
    <div id='menu' />
</body>
</html>

navbar.html

<ul>
    <li><a href='index.html' target="_top">Home</a></li>
    <li><a href='about.html' target="_top">About Us</a></li>
    <li><a href='http://www.brownpapertickets.com' target="_blank">Ticket Sales</a></li>
    <li><a href='merch.html' target="_top">Merchandise</a>
        <ul>
            <li><a href='merch.html' target="_top">Products</a></li>
            <li><a href='cart.html' target="_top">Shopping Cart</a></li>
        </ul>
    </li>
    <li><a href='past.html' target="_top">Past Shows</a>
        <ul>
            <li><a href='photos.html' target="_top">Photo Gallery</a></li>
            <li><a href='vids.html' target="_top">Video Clips</a></li>
        </ul>
    </li>
</ul>

Answer 3

我正在使用smartmenus for jquery，要求您添加

$('#main-menu').smartmenus();

如果您有子菜单

我发现如果你将负载扩展到：

$('#menu').load('navbar.html',function(){
    $('#main-menu').smartmenus();
});

这很好用。其中main-menu是菜单块的ul类。

Answer 4

你可以使用AJAX，然后只用那里的菜单代码创建一个单独的页面。

实际上你可以简单地使用jQuery的.load()，它非常容易使用。

以下是将nav.html加载到ID为#nav-container的div中的示例：

<script type="text/javascript">
$(document).ready(function() {
$('#nav-container').load('/path/to/nav.html');
});
</script>

您只需将此代码添加到每个页面并在其中设置div，但一旦执行此操作，您只需更新nav.html

注意：如果你不能使用PHP，这是最好的方法，因为iframe不再那么好了。这实际上会在页面加载时将代码从nav.html加载到页面中。（接受<html>，<body>和其他网页标记。它仅包含<body></body>页面上nav.html内的代码。

对于没有JavaScript的用户，只需在<noscript></noscript>代码中添加iframe即可。如果用户必须启用JavaScript而不使用您的网站，那么您不必为此烦恼。（请记住，iframe必须在导航中的所有链接上设置目标和内容。）

请记住，如果您尚未加载head，请在nav.html标记中添加jQuery文件链接。

希望这有用。

Answer 5

您可以将导航栏的标记放入文件menu.htm中，并在您希望菜单标记的页面上使用（服务器端包含）。 https://stackoverflow.com/a/2216356/2303079

以下是类似的讨论： Have a single menu on multiple pages?

如何在一个文件中存储导航栏？

5 个答案: