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

Question

提问by Jason

I have a navigation bar for my website:

我的网站有一个导航栏：

    <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>

I want to store this in one central place so that every time I have to add a hyperlink or something I don't have to edit every single file. What's the best way to do this?

我想将它存储在一个中心位置，这样每次我必须添加超链接或其他内容时，我都不必编辑每个文件。做到这一点的最佳方法是什么？

Answer 1

采纳答案by AlienWebguy

Assuming you are using a scripting language such as PHP, you simply save that HTML above in a php file called header.php(or something to your liking)

假设您使用的是 PHP 等脚本语言，您只需将上面的 HTML 保存在一个名为header.php（或您喜欢的东西）的 php 文件中

Then in your other php files you write:

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

include_once('header.php');and it will plop that HTML right in there.

include_once('header.php');它将把那个 HTML 放在那里。

Some resources for you:

一些资源给你：

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

Enjoy!

享受！

Answer 2

回答by no.good.at.coding

Update@AlienWebguy pointed out that these solutions will hurt your rankings in search engine results. If you care about that, don't use them. But in my opinion, as valid options, they are worth knowing about.

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

If a server-side include (using PHP or some other language) is not an option you could do it using :

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

Frames
In all your pages, include an iframe(styled to be without borders or scrollbars) and set the srcto be an HTML file that holds your navigation markup. ~~Of course, you're going to run in trouble with following links and you'll probably have to resort to JavaScript in order to get the 'right' behaviour. This is probably not worth the effort.~~To follow the links correctly, you'll need to use the targetattributein your navigation links to _top(or perhaps _parent). This is probably the simplest solution that should work even in user agents without scripting support.

For example, your page will look like this:

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

with navbar.html looking like this:

<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
Save the HTML you need for the navbar in the form of an HTML fragment (not a complete HTML document) and load it using ajax on page load. Here's an example using jQuery. On your page:

<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>

框架
在您的所有页面中，包含一个iframe（样式为没有边框或滚动条）并将设置为src包含导航标记的 HTML 文件。~~当然，您将遇到以下链接的麻烦，您可能不得不求助于 JavaScript 以获得“正确”的行为。这可能不值得付出努力。~~要正确遵循链接，您需要在导航链接中使用该target属性_top（或者可能是_parent）。这可能是最简单的解决方案，即使在没有脚本支持的用户代理中也能工作。

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

<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>

导航栏.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

回答by APA

I am using smartmenus for jquerywhich requires that you add

我正在使用jquery 的智能菜单，它需要您添加

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

if you have submenus

如果你有子菜单

I found that if you extend the load to:

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

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

this works fine. Where main-menu is the class of ul of the menu block.

这工作正常。其中 main-menu 是菜单块的 ul 类。

Answer 4

回答by Nathan

You could use AJAX and then make a separate page with just the menu code on there.

您可以使用 AJAX，然后创建一个单独的页面，其中仅包含菜单代码。

Actually you could simply use jQuery's .load()which is very easy to use.

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

Here's an example loading nav.htmlinto a div with #nav-containerfor the ID:

这是加载nav.html到带有#nav-containerID的 div的示例：

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

You would just have to add this code to each page and have a div on there but once you do this, you'll only have to update nav.html

您只需将此代码添加到每个页面并在那里有一个 div，但是一旦您这样做，您只需要更新 nav.html

Note:This is the best way to do it if you can't use PHP, as iframes are just not that good anymore. This will actually load the code from nav.htmlinto the page right as the page is loading. (accept the <html>, <body>, and other page tags. It'll only the code within <body></body>on the nav.htmlpage.

注意：如果您不能使用 PHP，这是最好的方法，因为 iframe 不再那么好。这实际上会nav.html在页面加载时将代码加载到页面中。（接受<html>，<body>以及其他页面的标签。这将只在代码<body></body>中的nav.html页面。

For your users without JavaScript, just put an iframe in <noscript></noscript>tags if you really want to. If you users have to have JavaScript enabled regardless to use your site then you don't have to bother with that. (remember with iframes you have to set targets and stuff on all of the links in the navigation.)

对于没有 JavaScript 的用户，<noscript></noscript>如果您真的想要，只需在标签中放置一个 iframe 。如果您的用户无论使用您的网站都必须启用 JavaScript，那么您不必为此烦恼。（请记住，使用 iframe，您必须在导航中的所有链接上设置目标和内容。）

Remember to include the jQuery file link in your headtags on all of your pages that you're loading nav.htmlinto if you haven't already.

如果您还没有head加载，请记住在您要加载的所有页面的标签中包含 jQuery 文件链接nav.html。

Hope this is helpful.

希望这是有帮助的。

Answer 5

回答by CaptainJanuary

You can just put your nav bar's markup into a file menu.htm and use a (server-side includes) in the spot on your pages where you want your menu's markup. https://stackoverflow.com/a/2216356/2303079

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

Here's a similar discussion: Have a single menu on multiple pages?

这是一个类似的讨论：在多个页面上有一个菜单？

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

提问by Jason

采纳答案by AlienWebguy

回答by no.good.at.coding

回答by APA

回答by Nathan

回答by CaptainJanuary

相关推荐

最近更新

标签

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

提问by Jason

采纳答案by AlienWebguy

回答by no.good.at.coding

回答by APA

回答by Nathan

回答by CaptainJanuary

相关推荐

Html 如何让行内元素出现在新行，或者块元素不占整行？

Html Font-Family 属性中有多种字体？

Html 用于对齐文本框和标签的 CSS

Html 如何在具有自动高度/无文本溢出的表格标题中显示垂直文本？

相关推荐

最近更新

标签