如何在多个页面上重复使用导航栏？

82

我刚刚完成了home / index.html页面的制作。要将导航栏保持在原处，并在用户单击我的所有页面时将其保留。我是否必须将导航代码复制并粘贴到每个页面的顶部？还是有另一种方法可以使它看起来更干净？

HMTL导航：

<nav>
    <div>
        <a href="/">
            <div id="logo"><img src="image.png" alt="Home"/></div>
            <div id="headtag"><img src="image.png" alt="Home"/></div>
            <div id="tagline"><img src="image.png" alt="Home"/></div>
        </a>
    </div>
    <div> 
        <a href="/" class="here">Home</a>
        <a href="/about.html" >About</a>      
        <a href="/services.html" >Services</a>          
        <a href="/pricing.html" >Pricing</a>    
        <a href="/contact.html" >Contact Us</a>
        <input id="srchbar" type="search" placeholder="Search">
    </div>
</nav>
html  navbar 
— 黑色Rob4953
source
是。请记住，当用户单击导航中的链接时，您的服务器/本地系统将发送由链接指示的文件，以供下载和显示。当他们单击“关于”时，about.html将由浏览器加载。因此，它应该包含相同的导航。
— Purag 2015年
1
如果您使用服务器端语言，则可以将此代码放在模板中，并包括在所有页面中，否则请使用angular js将其作为指令
— joyBlanks 2015年
3
我在找同样的东西。遗憾的是，2017年我们无法使用基于客户端的网站来做到这一点。Microsoft永远拥有母版页（当前版本为_layouts）的概念。似乎客户端的“容器页面”不会是荒谬的。
— 罗恩

Answers:

76

这就是帮助我的原因。我的导航栏在body标签中。导航栏的整个代码都在nav.html文件中（没有任何html或body标签，只有导航栏的代码）。在目标页面中，它位于head标记中：

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

然后在body标签中，创建一个具有唯一ID和javascript块nav.html的容器，以将其加载到容器中，如下所示：

<!--Navigation bar-->
<div id="nav-placeholder">

</div>

<script>
$(function(){
  $("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->
— 拉姆丁
source
你好。我对jquery / javascript一无所知，但我只是想尝试一下。我试着完全按照你说的做。我将导航菜单放在一页上，没有任何其他标签，并且将其余代码包括在索引页（简单索引页）的开头/正文中。但是，它不会在所有页面上加载我的导航栏。知道我可能做错了什么吗？谢谢 ！
— 躺
@Lay完全显示吗？我必须告诉您，在开发（本地加载页面）时，此代码通常不起作用。您是否已将此代码放在服务器上？
— 拉汀
3
有点偏离主题，请原谅我的无知：如果您像在答案中那样对jQuery版本进行硬编码<script src="https://code.jquery.com/jquery-1.10.2.js"></script>，那么当1.10.3或1.11.0版本问世时，页面会发生什么变化？
— Laryx Decidua
1
@LaryxDecidua然后它继续工作。始终加载最新版本可能会导致页面破裂。考虑一下版本之间的重大更改。因此，建议在切换到其他版本时进行测试。
— 马库斯·普谢伊特
1
我在本地PC上的index.html中使用了上面的代码，并在chrome中进行了测试，它在下面给了我错误，并且nav.html无法加载。jquery.min.js:4 Access to XMLHttpRequest at 'nav.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.任何的想法？
— KenyKeny
35

我知道这是一个很老的问题，但是当您拥有JavaScript时，可以使用jQuery及其AJAX方法。

首先，创建一个包含所有导航栏HTML内容的页面。

接下来，使用jQuery的$.get方法来获取页面的内容。例如，假设您已将所有导航栏的HTML放入一个名为的文件中，navigation.html并在其中添加了一个占位符标记（Like <div id="nav-placeholder">）index.html，那么您将使用以下代码：

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.get("navigation.html", function(data){
    $("#nav-placeholder").replaceWith(data);
});
</script>
— 雅克·马莱斯（Jacques Marais）
source
4

您可以使用php制作多页网站。

  • 创建一个header.php文件，其中应将所有html代码放入菜单和社交媒体等
  • 使用以下代码将header.php插入index.php中

<? php include 'header.php'; ?>

（以上代码将在此之前转储所有html代码）您的网站正文内容。

  • 同样，您可以轻松创建页脚和其他元素。PHP内置的扩展支持html代码。因此，最好学习此简单的解决方法。
— 萨钦·卡诺戈（Sachin Kanungo）
source
1
所以你们都说我应该将所有这些都转换为PHP，而不是为我的网站转换多个HTML页面吗？这是我的第一个站点，我知道html，这就是为什么我使用它，但是如果它应该是PHP，那么它应该是PHP ....那应该是哪个呢？
— blackRob4953
这是非常基本的php，您可以轻松学习。当您将自己的一方转换为使用服务器端语言时，您将不会再遇到噩梦。我推荐这个。但是，如果您打算仅使用html，请考虑将.shtml用于一些小问题，但对于成长中的网站，我仍然觉得它很笨拙。
— Sachin Kanungo 2015年
好。现在，此页面为html。我如何将其转换为PHP？是一些条目还是我必须重做所有标签？如果是这样，怎么...。所以我不要把它搞砸了
— blackRob4953
1
将扩展名更改为.php即可完成。使用以下代码大括号输入php代码<?php include 'header.php'; ?>转到php.net或w3schools进行基础学习。
— Sachin Kanungo 2015年
3

一种非常古老但足够简单的技术是使用“服务器端包含”将HTML页面包含到具有.shtml扩展名的顶层页面中。例如，这将是您的index.shtml文件：

<html>
<head>...</head>
<body>
<!-- repeated header: note that the #include is in a HTML comment -->
<!--#include file="header.html" -->
<!-- unique content here... -->
</body>
</html>

是的，这很la脚，但是有效。请记住在HTTP服务器配置中启用SSI支持（这是针对Apache的方法）。

— Laryx Decidua
source
3

白兰度ZWZ提供了一些很好的答案来处理这种情况。

回复：同一导航栏在多个页面上2018年8月21日上午10：13 | LINK

据我了解，有多种解决方案。

例如：

导航栏的整个代码位于nav.html文件中（没有任何html或body标签，只有导航栏的代码）。

然后我们可以直接从jquery加载它，而无需编写很多代码。

像这样：

    <!--Navigation bar-->
    <div id="nav-placeholder">

    </div>

    <script>
    $(function(){
      $("#nav-placeholder").load("nav.html");
    });
    </script>
    <!--end of Navigation bar-->

解决方案2：

您可以使用JavaScript代码生成整个导航栏。

像这样：

JavaScript代码：

$(function () {
    var bar = '';
    bar += '<nav class="navbar navbar-default" role="navigation">';
    bar += '<div class="container-fluid">';
    bar += '<div>';
    bar += '<ul class="nav navbar-nav">';
    bar += '<li id="home"><a href="home.html">Home</a></li>';
    bar += '<li id="index"><a href="index.html">Index</a></li>';
    bar += '<li id="about"><a href="about.html">About</a></li>';
    bar += '</ul>';
    bar += '</div>';
    bar += '</div>';
    bar += '</nav>';

    $("#main-bar").html(bar);

    var id = getValueByName("id");
    $("#" + id).addClass("active");
});

function getValueByName(name) {
    var url = document.getElementById('nav-bar').getAttribute('src');
    var param = new Array();
    if (url.indexOf("?") != -1) {
        var source = url.split("?")[1];
        items = source.split("&");
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            var parameters = item.split("=");
            if (parameters[0] == "id") {
                return parameters[1];
            }
        }
    }
}

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div id="main-bar"></div>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <%--add this line to generate the nav bar--%>
    <script src="../assets/js/nav-bar.js?id=index" id="nav-bar"></script>
</body>
</html>

https://forums.asp.net/t/2145711.aspx?Same+navbar+on+multiple+pages

-5

我不知道它是否对您有用，但对我有用。尝试放置没有任何标题或正文标签的导航代码（仅是导航栏开始和结束的代码）。将会发生的事情是您将分别放置导航栏的代码。假设您已经在navigation.html上有了导航代码，并将其包含在其他页面中，比如说index.php。要将其包含在body标签内，将在其上加载导航栏。

— qw12
source
2
您在这里提出的建议还不清楚。请提供标记示例。
— isherwood
太...了。您的答案与@Ramtin发布的答案相同吗？如果是这样，我理解，但是您需要增加一些清晰度，或者完全删除答案。
— Momoro
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.